[42Seoul] ft_transcendence - 00

드디어 42서울의 이너서클의 마지막 과제에 도달했다. 이번에는 과제 완료 후 정리해서 쓰는것이 아닌, 부분적으로 새로 배운 것이나 적용해본 것들을 위주로 글을 써볼까 싶다.

먼저, 우리 팀은 7월 초부터 프로젝트를 시작했다. 웹 프로젝트를 어떻게 시작해야하는지 모르겠어서 주변 사람들에게 도움을 좀 받았었다. 고맙게도 여러 조언들을 들을 수 있었고, 그 중에서도 여러 사람들이 공통적으로 조언을 했던 부분은 "설계"였다.

설계를 잘 하자

설계를 잘 하자는 말은 사실 42서울 과제를 하다보면 매번 듣는 말이었다. 하지만 개인 과제를 할 때는 뭔가 "하다보면 답이 나오겠지" 라는 생각으로 설계를 조금 소홀히 했었다. 그래서 막상 과제를 끝내고 코드를 다시 보면... ㅎ

점점 상위 과제를 할 수록 팀 프로젝트의 규모도 커져서 설계의 중요성은 높아져만 갔다. 그것을 웹서브에서 느꼈는데, 과제를 끝내고 나서 우리 팀의 코드를 설계 잘된 코드와 비교해봤더니 확실히 달랐었다.

그래서 이번 과제에서는 설계 단계를 길게 가져가기로 결정하고 프로젝트를 시작했다.

또한, 우리는 figma를 통해 설계에 필요한 디자인, 차트 등을 설계했다.

Figma: The Collaborative Interface Design Tool

사이트맵

설계의 처음은 사이트맵을 제작하는 것이었다. 사이트맵은 웹사이트의 구조를 체계적으로 표현한 목록이라고 생각하면 된다. 설계 도구로 사이트맵을 활용했을 때, 전체적인 구조와 흐름을 계획하는 데 큰 도움이 되었다.

또한, 사이트맵 설계를 통해 우리 팀은 채팅페이지를 더욱 부각시켜 나가기로 정할 수 있었다.

플로우 차트

사이트맵과 함께 플로우 차트도 함께 만들어보았다. 플로우차트는 사용자가 웹사이트를 사용하면서 경험할 수 있는 일련의 단계나 경로를 뜻하며, UX 설계의 핵심적인 부분이 되기도 한다.

우리 팀은 사이트맵을 참고하며 플로우 차트를 설계하였는데, 플로우 차트를 통해 애매모호한 기능들과 순서를 더 명확하게 정해줄 수 있었다.

우리 팀의 전체적인 플로우 차트이다. 하다보니 플로우 차트에 사이트맵의 요소를 추가한 듯한 느낌이 들었다.

와이어프레임

와이어프레임은 웹사이트의 구조적인 설계를 시각적으로 나타낸 도구로, 페이지의 주요 요소와 그들 간의 관계를 나타내며, 실제 디자인이나 내용에 대한 세부사항 없이 큰 그림을 보여주기 위한 목적으로 사용된다.

우리는 초기 디자인을 어떻게 구상할지 결정하기 위해 와이어프레임을 사용했다. 와이어프레임을 만들어보니 어떤 기능이 어디에 포함되어야하는지 더 구체적으로 생각해볼 수 있었다.

정말 간단하게 작성을 했고, 실제 UI는 와이어프레임에서 설계했던 틀과는 조금 달라지긴 했지만 설계에 큰 도움이 되었다.

UI 디자인

앞서 제작한 와이어프레임을 기반으로 실제 프로젝트 개발에 적용될 UI를 디자인했다. 디자인 컨셉은 vscode에서 많이 따왔다. vscode의 navbar나 sidebar가 꽤나 맘에 들었기 때문이다.

안하던 디자인까지 해보려니 너무 어려웠는데 그래도 나름 잘 뽑힌거같아서 만족스러웠다.

기술스택

백엔드는 nest.js를 꼭 써야했지만, 프론트엔드는 프레임워크를 자유롭게 사용해도 됐었다. 우리 팀은 리액트를 사용하기로 했는데, 그나마 제일 익숙하기도 했고, 다른 프레임워크를 써야할 이유를 못느꼈기 때문이기도 했다.

협업 규칙 및 개발 환경 세팅

은 다음 글에 써보기로 하겠다.