2D 팀 프로젝트 기획하기

내일배움캠프 22일차 TIL

오늘 하루는 기능 개발보다는 생각을 정리하고 구조를 잡는 기획에 집중했다.

기획하는게 힘들고 귀찮아서 그냥 바로 기능을 구현하거나 간단한 기획만 진행한 후 개발을 진행할 수 있지만, 전체 흐름 없이 구현만 하면 금세 구조가 무너질 수 밖에 없다고 생각했다.

 

기획의 탄탄하게 한다면 팀 전체가 같은 방향을 바라보게 해주며, 개발 중간에 발생할 수 있는 기능 누락, 역할 충돌 등을 미리 방지할 수 있다. 그리고 문제를 기능 단위로 분해하고, 각 파트를 어떻게 조립할지를 시각적으로 확인하고 이해할 수 있게 되니 매우매우 중요한 단계라고 생각했다!

📌 게임 기획 진행 단계

컨셉 도출 & 목표 설정

기획의 처음에는 게임의 장르와 어떤 재미 요소를 넣을건지, 그리고 게임의 컨셉을 정해야한다고 생각했다.

게임의 장르의 경우 물불게임, 궁수의 전설, 쿠키런 : 오븐브레이크 세 가지 선택지가 주어져 팀 회의 끝에 궁수의 전설을 기반으로 진행하기로 결정했다! 레퍼런스가 될 게임을 정하면서 자연스레 게임의 장르와 재미 요소도 로그라이크 / 회피와 슈팅으로 결정되었다.

그리고 게임의 컨셉을 잡기 위해 배경 설정, 세계관, 기본 스토리라인을 구상하였는데, 조장님이 거의 전부 다! 구상해주셨다.

 

기능 리스트 작성

그리고 나서 게임에 필요한 전체 기능을 나열하였다.

주어진 프로젝트의 필수 기능과 도전 기능을 참고하여 핵심 기능과 부가 기능을 분리하여 우선순위를 설정했다.

MVP(: 최소 기능 제품)은 다음과 같았다.

 

화면 구성 및 와이어프레임 작성

어떠한 기능을 구현할 것인지 정했다면 그 기능이 보여질 주요화면 (UI)를 구성해야했다.

메뉴, 인게임, 게임 오버 등 각 씬에서 보여질 요소를 결정해야했으며 버튼, 상태창 등이 위치 및 흐름을 정의하는데 도움이 되기때문에 작성하는게 좋지만 전체적인 UI는 내가 담당하기 했기때문에 우선순위를 미뤘다..! 오늘 내일안에 완성해야지.

 

클래스 다이어그램 및 시스템 설계

그래서 와이어프레임 작성은 하지 않고 바로 클래스 다이어그램을 draw.io를 통해 작성했다.

클래스 다이어그램을 작성하면서 중요 클래스를 정의하고 클래스 간 관계를 설계했다. 또한 시스템 흐름을 구조화 시켜 시각적으로 확인할 수 있게 하였다.

 

개발 일정 수립 및 역할 분담

전체 작업을 기능 단위로 나누고 우선순위를 정하고 팀원별 담당 기능을 분배하였다. 나는 맵 랜덤 생성과 전체적인 UI 생성을 하기로 했다!  

 

📌 클래스 다이어그램을 작성하는 이유

클래스 다이어그램은 소프트웨어의 구조를 시각화하는 도구이다. 객체지향 프로그래밍에서 중요한 클래스 간의 관계, 책임, 속성, 메서드를 한눈에 파악할 수 있게 해준다.

작성 목적

1. 설계의 방향성 공유

• 팀원 간에 객체 구조와 책임 분담을 명확히 하기 위함
• 역할 충돌, 중복, 누락을 사전에 방지

2. 기능 구현 전에 구조적 문제를 발견

• 객체 간 관계를 시각화함으로써, 불필요한 결합(의존성), 순환 참조 등 구조적 결함을 조기에 발견 가능

3. 유지보수와 확장에 대비

• 클래스가 어떻게 상속되며 서로 어떤 메시지를 주고받는지 파악하여, 이후 변경에도 유연한 구조 설계

클래스 다이어그램을 통해 얻는 이점

이점	설명
전체 구조의 시각화	코드에 들어가기 전 시스템의 설계와 구조를 명확히 이해할 수 있다.
팀원 간의 소통 도구	설계 문서로 활용되어 누구나 빠르게 구조를 이해하고 협업 가능
역할 분리와 책임 분명화	각 클래스가 어떤 역할을 맡고 있는지 명확해져 기능 분담과 관리가 쉬워진다
리팩토링에 강함	구조가 명확히 잡혀 있으면 변경이 쉬워지고, 의존 관계 관리가 용이
개발 생산성 향상	처음부터 방향을 잡고 시작하면 중복 구현이나 구조 변경으로 인한 시간 낭비를 줄일 수 있다

 

📌 와이어프레임을 작성하는 이유

와이어프레임은 UI/UX 설계의 초석이다. 개발 전 단계에서 기능의 흐름, 사용자 인터페이스의 구조, 주요 버튼과 정보의 배치 등을 시각적으로 표현하는 설계 도구다.

작성 목적

1. 사용자 흐름 시각화

• 유저가 게임(또는 앱)을 사용할 때 어떤 화면에서 어떤 행동을 하게 되는지를 흐름 단위로 표현
• 복잡한 UI 구조를 단순화하고, 기능과 인터페이스가 어떻게 연결되는지 정리

2. 기획-디자인-개발 간 커뮤니케이션 도구

• 개발자, 기획자, 디자이너가 기능과 레이아웃에 대해 공통된 이해를 갖게 도와줌
• 불필요한 디자인 리소스 낭비를 줄임

3. 유지보수와 확장에 대비

• 화면에서 무엇이 먼저 보여야 하는지, 중요한 정보는 어떻게 강조할지 결정 가능

클래스 다이어그램을 통해 얻는 이점

이점	설명
기획 방향의 명확화	게임의 구조와 흐름이 시각적으로 정리되어 기능 누락이나 혼선을 줄여줌
UI 요소 간 관계 이해	버튼, 텍스트, 아이콘 등 UI 구성 요소들이 어떤 역할을 하는지 한눈에 파악
개발/디자인 시간 단축	구현 전에 미리 화면을 설계해두면, 실제 개발 시 시행착오를 줄일 수 있음
팀원 간 소통 도구	구체적인 화면 예시를 바탕으로 팀원들과 피드백 주고받기 쉬움
사용자 관점 설계 가능	‘사용자는 어떤 정보를 먼저 보고 싶을까?’를 고려하게 되어 UX 향상

💬 정리하자면

클래스 다이어그램 은 단순히 예쁘게 그리는 그림이 아니라, 설계 품질을 높이고 커뮤니케이션을 원활하게 해주는 핵심 도구!

특히 팀 프로젝트에서는 개발 이전에 서로의 이해를 맞추는 데 매우 유효하며, 유지보수와 확장을 고려한 코드 작성에도 큰 도움을 준다.

와이어프레임 은 생각을 그리는 도구!

기능을 구현하기 전에 "어떻게 보이고, 어떻게 작동해야 하는가"를 빠르게 스케치함으로써, UI 흐름을 명확히 하고 개발 효율을 높이며 팀 커뮤니케이션을 원활하게 해준다.

간단한 선, 박스, 텍스트만으로도 충분히 유용하며, 디자인보다 기능 중심의 화면 구성과 흐름에 집중하는 것이 핵심.