게임대장경 #1 협업 프로젝트 시작부터 기획까지

 

2024/02/08 프로젝트 첫 모임 (정기미팅 #1) 을 가졌다. 

프론트엔드는 나 포함 2명, 백엔드는 세 명, 총 다섯 명.

 

시간을 보니 프로젝트를 공식적으로 시작한 지도 벌써 한 달이 다 지나갔다. 

현재 진행상황은 기획(요구사항 명세서, 와이어프레임), 디자인(스토리보드), DB 및 API 명세까지 마무리 한 상태이다. 

 

---

 

위 단계들이 모두 개발은 아니므로 기획이라고 뭉뚱그려 말한다면,

사실 기획이 이렇게 오래 걸릴 줄은 몰랐다. 

첫 미팅 날 바로 아이템 선정을 마무리 지었기 때문이다. 

아이템 선정은 팀원들 각자가 생각해온 아이디어들을 모두 취합한 후, 그중에서 가장 실현 가능성이 있는, 쉽게 말해 우리가 진짜 만들어낼 수 있을 만한 것으로 선택하였다. UX적으로 아쉬움과 한계가 있을 것은 당연했고, 기존 서비스들에 비해 경쟁력이 있는 신박한 아이템을 구상하고자 하는 것은 그저 상상, 욕심, 이상으로 가슴 깊이 묻어두었다. 

 

아, 첫 미팅 때 나는 PM이 되었다. 

"PM 하고 싶은 사람?" 이란 말을 듣자마자 바로 심장이 쿵쾅쿵쾅 뛰었지만 

혹시 하고 싶어하는 분이 계실까 내색을 안 하고 있다가 나의 눈치 모래시계가 거의 끝나갈 무렵 내가 하고 싶다고 말했다.

그 누구도 나에게 PM이 어울린다거나, PM 해달라거나 그런 것은 아니지만

내가 하고 싶었던 역할을 내 의지로 잡아낸 만큼 더 책임감 있게 잘 해내고 싶은 마음으로 가득하다. 

 

여튼.

프론트엔드 개발자와 PM이라는 역할을 가슴에 달고 아이템 구체화와 요구사항 명세서 작성을 위한 미팅 스케줄을 잡았다.

"미디어(영화,드라마,애니)에 관한 위키 및 댓글과 대댓글 기능을 통한 커뮤니티" 라는 아이템을 정했으니,

그에 관해 개개인이 구상하는 웹 서비스의 모습을 요구사항 명세서를 통해 구체화해오고, 이를 미팅 때 취합하여 좋은 것은 취하고, 아쉬운 것은 버리면 되겠다고 생각하였다. 

그러나 내 맘대로 되는 것은 절대 없지.. 

아이템의 주제(미디어)도, 기능(위키, 커뮤니티)도 narrow하지 못해 경쟁력이 없는 것 같아 아이템을 변경하고 싶다는 팀원의 의견을 듣게 되었다. 애초에 경쟁력 있는 서비스를 만드는 것은 꿈도 꾸지 말자 스스로 되뇌였었지만, 팀원 몇몇의 의견은 무시할 수 없었고, 결국 아이템 구상을 다시 하게 되었다.

 

그래도 크게 변하지는 않고,

주제: 미디어(영화,드라마,애니) → 게임

기능: 위키>>>커뮤니티 → 위키 && 커뮤니티

 

 

위 아이템 선정을 바탕으로 필요한 기능들을 구분하고 

기능에 따라 역할분담을 하여 요구사항 명세서를 작성하며 일주일이 지났다.

---

 

[ 2024/02/15 정기미팅 #2 ]

- 변경된 아이템 기능 구체화 하기

- 요구사항 명세서 피드백 받기

- 서비스명, 로고 정하기

게임대장경이올시다

 

 

미팅을 바탕으로 와이어프레임을 만들면서 일주일을 보냈다.

 

(요구사항 명세서 작성은 Google Spreadsheets를, 와이어프레임 제작은 Google Slides를 사용하였다)

(로고는 뤼튼 GPT-4를 이용해 생성하였다)

 

---

 

[ 2024/02/22 정기미팅 #3 ]

- 요구사항 명세서 피드백 받기

- 와이어프레임 피드백 받기

 

미팅을 바탕으로 스토리보드를 만들면서 또 일주일을 보냈다.

 

(스토리보드 제작은 Figma를 사용하였다)

 

피그마 사용은 이번이 처음은 아니었다.

 

22년 HS Augsburg: AR 어플 개발 수업에서 유령처럼 앉아있으면서 디자이너 친구들이 만든 피그마 페이지를 구경함
22년 독일: 디자이너 언니의 부탁으로 한 장짜리 html 페이지를 만들어줄 때 피그마의 기능들을 엿봄
23년 동아리 네터스: 협업 플젝(프2, 백2, 디1)에서 디자이너가 날라버린 바람에 내가 피그마로 디자인 해봄
23년 동아리 UMC: 협업 플젝(프4, 백4, 기1, 디1)에서 디자인 전공자 친구가 만들어준 전문적인 피그마 페이지를 보며 개발을 함

 

 

그리고 현재 다니고 있는 학원(23년~24년)에서 매주 구현 과제가 주어질 때마다 파워포인트를 사용하는 방법도 있었지만, 꾸역꾸역 피그마를 사용해왔다. 

 

얼마나 피그마를 사용해봤나 스스로 복기해보기 위해 위와 같이 적어보았다. 나름 피그마와의 적지 않은 접점이 있었다 생각해 잘 할 수 있을 거란 자신감이 있었는데 웬걸..ㅎㅎ 

아주 처음 배우는 듯한 마음가짐과 실력으로 유튜브 선생님들의 영상을 보며 배워나갔다.

대단한 모양을 만드는 것은 아니었기에 컴포넌트 만드는 방법을 한 번 따라해본 후에 바로 시작할 수 있었다. 

이 방대한 양의 페이지들 중 어떤 것부터 어떤 순으로 만들어야하나 막막했지만,

결국 개발과 비슷하다는 생각을 하게되었다. 

 

 

요구사항 명세서와 와이어프레임을 찬찬히 훑으면서 공통되는 컴포넌트들을 파악하고 먼저 만든다. 

(나의 경우) 컴포넌트만 만들다보면 내가 무얼 만들고 있는지 큰 그림이 보이지 않기 때문에 

컴포넌트를 어느정도 만들었다 싶을 때 요구사항 명세서에 있는 기능(페이지) 명을 기준으로 프레임을 짜기 시작한다.

 

같은 페이지인데 사용 흐름에 따라 UI가 바뀐다면 이는 가로로 나열하고,

서로 다른 페이지의 경우 세로로 배치하였다. 

페이지에 따라 무한정 세로로만 배치하면 가독성이 떨어지므로

(개인정보 관련 - 로그인, 회원가입, 아이디 찾기 등 // 메인 - 홈화면 등 // 게시판 - 게시글 쓰기, 읽기 등 // 위키 - 위키 읽기, 편집하기 등 // 알림 페이지 - 알림 삭제, 승인 등)과 같이 비슷한 기능들끼리 뭉치고 서로 다른 것들은 좌->우로 가로 배치하였다. 

화면설계서 페이지

 

컴포넌트들은 화면설계서와는 별개의 페이지에 모두 모아놓는 방식을 취하였다. 

컴포넌트 페이지

 

 

피그마 variants 기능을 활용해서 하나의 컴포넌트에 대한 세트를 만드는 기능을 사용하는 것이 매우 흥미로웠다.

비슷한 모양의 버튼도 ux에 따라 아주 조금씩 변경되는 등의 일이 잦고, 그럴때마다 props를 줄까, class를 줄까 등 다양한 고민을 할 수 있는 프론트엔드 개발의 시각에서 고민해보기도 했다. 

 

나름 재미있었다ㅎㅅㅎ

 

---

 

[ 2024/02/29 정기미팅 #4 ]

- 스토리보드 피드백 받기

- git-flow 배우기

 

 

< UX/UI 관련 피드백 >

1. 로그인/회원가입 등의 input 만들 때 좋은 UX, 그에 따른 UI
   • 제약조건을 placeholder 명시해주거나
   • 입력을 받고 유저가 버튼을 눌렀을 때 제약조건 유효성 검사를 진행, 어긋난 형식의 입력값을 받은 input의 경우 border 색을 red로 바꿔주고 하단에 제약조건을 명시해준다 (← 트렌드)
2. 회원가입/비밀번호 변경 시 사용자가 비밀번호를 의도한 대로 입력했는지 확인하도록 하는 UI
   • 비밀번호 input 안에 눈모양 버튼을 통해 사용자가 직접 본인이 작성한 비밀번호를 확인할 수 있게 하는 방법
   • 비밀번호, 비밀번호 확인이라는 두 개의 input을 받아 서로 동일한지 하단에 명시해주는 방법
3. 사용자가 브라우저 자체 뒤로 가기/앞으로 가기 버튼을 최대한 사용하지 않도록 하기
   • 우리가 만들고 있는 웹을 사용자가 모바일로 볼 가능성을 최대한 고려하기 위함
4. 리액트 라우터로 페이지 변경이 되는 게 아니라면 뒤로가기 버튼 필요함

< figma 사용 관련 피드백 >

• 색상 변수 처리와 같이 padding, weight, height 등의 사이즈도 변수로 저장해줄 것
• 컴포넌트 묶음, 컬러변수, 사이즈변수, 폰트 종류, 폰트 사이즈 목록, 버튼 집합 호버, 엑티브 등.. → 별도의 페이지에 모아둘 것
• 프레임 명 상세하게 적어줄 것 (무슨 페이지가 어떤 상황일 때의 모습인지)
• 보통 알림이 삭제된 현상 등 기능에 관한 것은 별도의 프레임으로 보여주진 않음 (요구사항 명세서에 적을 것)

---

 

사실 개발자로만 이루어진 이번 프로젝트를 시작하고,

지난 한 달 동안 내가 PM으로서, 그리고 프론트엔드 개발자로서 무얼 하고 있나 계속 생각했다.

 

PM으로서는 매일 정기 미팅이 끝나고나면 받은 피드백들과 다음 일주일동안 해야할 일들을 노션에 To-do list로 정리해드리고, 내가 속한 프론트엔드 뿐만 아니라 백엔드 분들은 어떻게 잘 되어가시나 기웃기웃 거리고.. 개발에 들어가기 전에 기능적인 측면에서 하자는 없는지 요구사항 명세서를 매일 끊임없이 들여다보는 일...

 

프론트엔드 개발자로서는 피그마 붙잡고 최대한 중복 컴포넌트화하기..? 사용자 친화적인 ux가 무엇일까 고민하기..? 좋은 ui/ux를 엿볼 수 있는 레퍼런스 찾아보기..? 백엔드 개발자 분들은 DB 테이블 짜느라 머리 아파하시고 API 명세서도 짜고 앞으로 있을 카카오 로그인, 이메일 인증 등도 미리 공부하시던데 나는 잘 하고 있나.. 하는 스스로에 대한 의심이 들었다.

 

하지만 그러면서도 동시에 서비스와 사용자에 대한 고민을 하는 것이 정말 재밌다는 생각이 들기도 했다.

이런 저런 서비스들 이용해보고, 인간에 대해 고민하는 것이 젤 재밌는 나에게 

평소 머릿속에 아카이빙 되어있던 레퍼런스들을 마구 끄집어내서

'이렇게 만들면 좋겠다, 그리고 만들자!' 고 하는 과정이 정말 나랑 잘 맞구나 생각했다. 

 

 

개발을 머지 않아 앞두고 있는 지금은 또 개발이 두렵다.

내가 호기롭게 디자인 해놓은 이 웹사이트를 내가 진짜 구현해낼 수 있을까? 

 

 

 

3월이 막 시작되었다. 

학교엔 설레는 마음들로 가득한 환한 모습의 사람들이 가득하다. 

그들의 모습이 참 아름답고, 부럽기도 하다. 

내 모습이 초라하다고 생각하지 말고, 꾸준하게 노력하는 나 자신을 칭찬하면서 열심히 해보자!!