시작
중학교 친구들과 항상 이야기하던 것이 있었다. ‘우리들의 홈페이지’를 만들자고. 하지만 이전까지 만들자는 이야기는 있었지만 시작하기엔 큰 무리가 있었다. 모두 각자의 일상에 치여살기도 하고 군 입대 등으로 여유가 나지 않았기 때문이다. 또 웹페이지를 만들기 위해서는 백엔드 및 프론트엔드 지식이 모두 필요한데 짧은 기간 내에 이 모든 것을 공부해서 웹페이지를 만들기는 쉽지 않지 않은가? 그래서 어영부영 여러 해가 지나갔다.
그러기를 몇 해, 그 동안 나는 웹페이지를 만들 충분한 지식을 지닐 수 있었다. 반 년 전까지 개발 동아리인 와플스튜디오 활동을 하면서 웹페이지 개발을 하려면 어떤 프로세스로 이루어져야 하는가를 공부했다. 또한 이 과정에서 백엔드 및 네이티브 앱(안드로이드) 개발 지식을 쌓았다. 또한 2021년 가을학기에 ‘소프트웨어 개발의 원리 및 실습’ 강의를 수강하며 기존에 알던 백엔드 지식과 새롭게 알게 된 프론트엔드 개발 지식을 함께 이용하여 웹페이지 개발을 배울 수 있었다. 이 과정을 거치며 드디어 나는 우리들의 홈페이지를 만들기 위한 지식들을 모두 갖출 수 있었다. 남은 것은 개발이었다.
무엇을 넣을까
하지만 시작부터 난관이었다. 우리들의 홈페이지를 만들긴 해야겠는데 거기 무엇을 넣어야할지 몰랐다. 그래서 단톡방에 홈페이지에 무엇을 넣으면 좋을지 질문글을 올렸고 다양한 feature list를 받을 수 있었다. 이 지점에서 문서 정리의 필요성을 느끼고 Notion 페이지를 하나 생성해서 정리하기 시작했다.
디자인
시작은 디자인이었다. Figma를 이용하여 대략적인 방향을 잡고 프론트부터 차근차근 진행할 생각이었다. 하지만… 디자인이라는게 생각보다 많이 어려웠다. 디자인 베이스 홈페이지의 웹 디자인 입문 강좌를 따라가보며 여러 디자인 개념들을 익혔지만 커뮤니티의 형태를 갖춰야했기 때문에 여러 부분에서 변형이 필요했다. 특히나 게시판, 위키 등 여러 컨셉이 혼합된 홈페이지였기에 머릿속이 더 복잡해졌다.
머릿속으로만 생각할 순 없다는 생각에 무작정 다양한 커뮤니티의 UI 형태를 확인해보기로 했다. 네이버 카페, 다음 카페 등 한국 커뮤니티를 비롯해서 레딧 등 다양한 커뮤니티를 참고하였다. 또한 그 외에도 여러가지 디자인을 참고하였는데 가장 관심이 갔던 디자인은 ‘Notion’이었다. 얇은 상단 바와 좌측에서 가볍게 나왔다 들어가는 메뉴 바의 디자인이 눈길을 끌었다.
상단 바와 좌측 메뉴 바를 큰 틀로, 메인 화면을 디자인했다.
상단 바는 로그인, 홈페이지 로고와 메뉴를 열었다 닫을 수 있는 버튼으로 구성했다. 디자인에 사용된 아이콘들은 대부분 Flaticon의 uicons에서 가져왔고, 색상은 Adobe 색상 팔레트 생성기를 이용했다. 항상 단톡방의 이미지로 사용되었던 나무 그림이 있는데 (메인 화면의 바탕이 된 사진) 자동 생성기를 이용하여 컨셉이 되는 색상을 추출하였다.
로고 디자인은 후배의 손을 빌렸다. 항상 단톡방 사진으로 사용되었던 이미지를 컨셉으로 S를 그려달라고 했는데 상상도 못한 고퀄리티의 결과물이 나왔다. 금손 최고…
첫 기록을 마치며
처음 프로젝트를 시작하면서는 엄청난 코딩의 연속일 것이라 생각했는데 혼자 프로젝트를 진행하는 것이다보니 정해진 것이 아무것도 없었다. 기획, 디자인, 개발 모두를 한꺼번에 하려고하니 정말 엄청난 노력이 든다는 것을 알 수 있었다. 하지만 뭐니뭐니해도 ‘시작’ 했다는 점에서 큰 의미를 가지는 것 같다. 수 년 간 말만 해오던 것들을 실제로 만들어볼 수 있으니 당연한 것일지도.
다음 기록에서는 가장 먼저 구현할 게시판과 간단한 프론트엔드 및 백엔드 작업을 (가능하면) 진행하려 한다.