atomicdev 님의 블로그

제11강: 점수 시스템 및 리더보드 구현학습 목표:이번 강의에서는 "BrainBox Delivery" 게임에서 점수 시스템을 구축하고, 플레이어 간의 경쟁을 위한 리더보드를 구현하는 방법을 학습합니다. 점수 계산 로직을 구현하고, 이를 화면에 표시하는 UI를 추가하며, 간단한 리더보드를 만들어 점수를 정렬하여 보여주는 기능을 구현하게 됩니다.1. 점수 계산 로직 구현점수 시스템은 게임의 중요한 요소 중 하나로, 플레이어의 성과를 측정하고 이를 바탕으로 경쟁을 유도하는 역할을 합니다. 점수는 플레이어가 게임 내에서 수행한 행동에 따라 계산됩니다.1.1 점수 계산 로직 설정점수는 배달된 아이템의 수, 정확성, 배달 속도 등을 기준으로 계산될 수 있습니다. 예를 들어, 각 아이템 배달 시 기본 점수를 부여하고..

제5강: 첫 번째 화면 - 게임의 메인 화면 구현학습 목표:이번 강의에서는 "BrainBox Delivery" 게임의 메인 화면을 구현하는 방법을 학습합니다. 여러분은 기본 레이아웃을 구성하고, 화면 전환(Navigation)을 설정하며, 메인 메뉴와 게임 시작 버튼을 구현하는 과정을 거치게 됩니다. 이 과정에서 Flexbox 또는 Column/Row 위젯을 사용하여 화면을 구성하고, 사용자 경험을 개선할 수 있는 UI 요소를 추가하게 됩니다.1. 기본 레이아웃 구성: Flexbox 또는 Column/Row 위젯 사용게임의 메인 화면을 구성하기 위해서는 먼저 레이아웃을 설계해야 합니다. React Native에서는 Flexbox를, Flutter에서는 Column/Row 위젯을 사용하여 레이아웃을 구성할..

12강: Bootstrap 폼 디자인 및 연동내용 요약Bootstrap을 사용한 폼 디자인:Bootstrap은 웹에서 폼을 디자인할 때 유용한 CSS 클래스를 제공합니다. 간결하고 반응형 폼을 쉽게 만들 수 있으며, 다양한 입력 필드, 버튼, 레이아웃 옵션을 제공합니다.Bootstrap 폼 구성 요소:form-group: 폼 필드를 그룹화하는 클래스.form-control: 텍스트 입력 필드, 선택 상자 등의 스타일링을 위한 클래스.form-check: 체크박스와 라디오 버튼의 스타일링을 위한 클래스.btn: 버튼 스타일링을 위한 클래스.Flutter와의 연동 방법:Flutter 웹 프로젝트에서 Bootstrap을 활용하여 폼을 디자인한 후, 사용자 입력을 처리할 수 있습니다.Bootstrap 폼을 Ht..

10강: Flutter와 Bootstrap을 결합한 UI 디자인내용 요약Flutter 위젯과 Bootstrap 컴포넌트를 결합하여 UI 구성:Flutter는 강력한 위젯 기반 프레임워크로, 모바일, 웹, 데스크탑에서 동일한 코드를 사용하여 UI를 구성할 수 있습니다.Bootstrap은 HTML, CSS 기반의 프레임워크로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 컴포넌트를 제공합니다.이 강의에서는 Flutter 위젯과 Bootstrap 컴포넌트를 함께 사용하여 UI를 디자인하는 방법을 학습합니다. Flutter의 위젯을 사용하면서 Bootstrap의 그리드 시스템과 스타일링을 적용하여 웹에서 유연한 UI를 만들 수 있습니다.두 가지 기술을 혼합하여 유연한 UI 디자인 구현:Flutter의 기본 ..

8강: Bootstrap 그리드 시스템 이해하기내용 요약Bootstrap의 그리드 시스템 개념:Bootstrap 그리드 시스템은 레이아웃을 구성하는 데 사용되는 12열 기반의 시스템입니다. 각 열은 화면 크기에 따라 자동으로 크기가 조정되며, 반응형 웹 디자인을 쉽게 구현할 수 있게 해줍니다.그리드는 container, row, col 클래스를 사용하여 구성됩니다. col 클래스에는 col-sm-, col-md-, col-lg-, col-xl-와 같은 접두사가 붙어 특정 화면 크기에서 열의 크기를 정의할 수 있습니다.그리드 시스템을 사용한 반응형 웹 디자인:반응형 웹 디자인은 다양한 화면 크기(예: 모바일, 태블릿, 데스크탑)에서 일관된 사용자 경험을 제공하기 위해 레이아웃이 자동으로 조정되는 디자인입니..

7강: Flutter 위젯 기초 - Text와 Image 위젯내용 요약Flutter에서 가장 많이 사용되는 기본 UI 위젯 소개:Flutter 위젯은 Flutter 애플리케이션의 모든 UI 요소를 구성하는 기본적인 빌딩 블록입니다.Flutter에서 가장 많이 사용되는 기본 위젯으로는 Text와 Image 위젯이 있습니다. 이 위젯들은 텍스트와 이미지를 화면에 표시하는 데 사용됩니다.Text와 Image 위젯의 사용법:Text 위젯:텍스트를 화면에 표시하기 위한 위젯입니다. 다양한 스타일을 적용할 수 있으며, 텍스트 정렬, 색상, 폰트 크기 등을 조정할 수 있습니다.기본적인 사용법:dartText( 'Hello, Flutter!', style: TextStyle(fontSize: 24, color: C..

6강: Bootstrap으로 UI 기본 구성하기내용 요약Bootstrap 개요 및 사용 이유:Bootstrap은 가장 널리 사용되는 프론트엔드 프레임워크 중 하나로, 반응형 웹 디자인을 쉽게 구현할 수 있는 다양한 CSS 및 JavaScript 컴포넌트를 제공합니다.기본적으로 미리 스타일링된 컴포넌트들이 포함되어 있어, 빠르고 일관된 사용자 인터페이스(UI)를 구축하는 데 매우 유용합니다.Bootstrap을 사용하면 웹 애플리케이션의 UI를 보다 쉽게 구성하고, 다양한 기기에서 일관된 디자인을 유지할 수 있습니다.Flutter와 Bootstrap의 조합:Flutter는 주로 모바일 및 데스크탑 애플리케이션을 대상으로 하지만, 웹 플랫폼도 지원합니다. 웹 애플리케이션에서 Bootstrap을 사용하면 기존의..

제1강: 여정의 시작 - 게임 개발과 취업 준비의 첫걸음학습 목표:이 첫 번째 강의에서는 모바일 게임 개발의 전체적인 과정을 이해하고, 우리가 함께 진행할 프로젝트인 "BrainBox Delivery"의 개요를 살펴보겠습니다. 또한, 이번 여정에서 사용할 개발 도구와 프로그래밍 언어를 선택하는 데 도움을 드리고자 합니다.1. 게임 개발의 기본 개념과 과정 이해게임 개발은 여러 단계로 구성된 복잡한 과정입니다. 아래에서 주요 단계를 간단히 살펴보겠습니다.아이디어 구상 및 기획:게임의 목표, 스토리, 주요 기능을 정의합니다. 어떤 종류의 게임을 만들 것인지, 게임이 사용자에게 어떤 경험을 제공할 것인지 결정합니다.삽화: 게임 아이디어를 구상하며 메모를 하거나, 브레인스토밍을 하는 장면을 그림으로 표현합니다...