시작은 단순했다. 과제에 치여 여느 때와 다름 없는 11월의 어느 날, seohchoi님과 진로에 대해 이야기를 나누다 같이 자바스크립트를 공부해보자는 이야기가 나왔다. 배운 적은 있지만 정말 그 뿐이었고 머리도 식힐겸 수락했다. 어떻게 공부해야할지에 대한 방법에 대해 다양한 의견이 오갔고 다음과 같다.
- 관련 책 혹은 깃허브 게시물로 공부하기
- 강의 보기
- 프로젝트를 진행하면서 필요한 지식은 그때그때 익히기
클론 코딩의 매력을 맛봤던 기억을 떠올려 3번 방식으로 진행해보자는 쪽으로 의견이 모아졌다. 때 마침 if(kakao)의 event가 진행중이었고, 이를 본 우리는 42서울만의 간단 성향 테스트를 구현해보자는 방향으로 이야기가 흘러갔다. 전체적인 컨셉은 42서울의 모토(“우리는 헤아릴 수 없이 거대한 우주와 시간의 역사 속에서 찰나의 순간을 함께 보내며 경이로운 모험을 하는 여행자들입니다.”)에서 따왔다. 여기서 수영장(라피신) 느낌을 더해 ’42서울을 통해 목표를 향해 헤엄치는 개발자’로 결정하였다. 또한 지금은 코로나로 인해 클러스터에 갈 수는 없지만, 42서울의 학생이라는 소속감을 가지면서도 학생들간의 공감대 및 유대감 형성을 중점적으로 생각했다. 이 모든 의도를 담아 제목은 LifeOn42로 지었다.
index 초안 
survey 초안 
result 초안
LifeOn42는 사용자의 이름을 입력하고 시작하는 index와 7개의 문답으로 구성된 survey, 결과 이미지가 들어갈 result 총 3개의 페이지로 구성되어있다. index 페이지는 로고와 간단한 테스트 설명, 사용자 이름 기입란과 ‘시작하기’ 버튼만을 넣어 최대한 단순하게 만들었다. 이름을 쓰고 버튼을 누르면, 본격적인 설문을 진행할 수 있는 survey 페이지로 이동한다. 총 7문제로 사용자가 속한 길드부터 42서울 생활을 하며 한 번쯤 고민하거나 겪을 수 있는 이야기들로 구성하였다. 답변을 제출할 때마다 사용자가 어느 정도 진도를 나갔는지 유추할 수 있도록 상단 바가 움직인다. 마지막 설문을 제출할 때는 ”계속하기’였던 버튼 문구가 ‘제출하기’로 바뀌면서, 마지막 답변까지 완료하면 result 페이지로 넘어간다. 결과 이미지가 보이기 전에, 수영장이 연상되도록 물이 차오르는 모습의 로딩 창이 나온다. 로딩이 완료되면 결과 이미지와 어떤 성격의 개발자인지에 대한 타이틀과 부가 설명이 보인다.
프로젝트를 진행하는데 가장 중요하다고 말할 수 있는 ‘어떻게 개발할 것인가?’에는 Peer programming 방식을 택했는다. 개발 시간은 조금 느리더라도 서로가 기능 하나 하나를 제대로 이해하고 구현해보자는 취지에서였다.
index 페이지를 시작으로 조금씩 틀을 잡아나가기 시작했다. 어느덧 자바스크립트로 구현만 남겨두고 있었다. 그런데 막상 하려고 보니, 나도 seohchoi님도 자바스크립트가 하나도 생각나지 않았다! 그때그때 구글링을 하며 자바스크립트를 학습하는 원래의 계획은 무리였다. 결국 2번의 과정을 추가하였고, 바로 다음 날부터 공부해나가기 시작했다. 2주 동안 강의를 들으며 강도높게 공부하고, 끝나자마자 프로젝트에 복귀하였다. index와 survey 페이지의 경우, 강의 중에서 이미 구현해본 경험도 있어 무난하게 넘어갈 수 있었다. 하지만 result 페이지에서 벽에 부딪혔다. 바로 ‘이미지 합성’이었다. 이미지 합성 로직은 다음과 같다.
- survey에서 선택한 답변에 따라, 각 답변에 해당되는 이미지 값을 배열에 넣는다.
- 배열의 길이와 총 문제 수(7)가 같다면, default 이미지에 들어온 순서대로 쌓는다.
- result 페이지에서 그 결과 이미지를 출력한다.
핵심 문제는 ‘result 페이지에서 새로고침을 해야만 모든 이미지들이 제대로 합성된다’는 것이다. 이러한 이슈가 발생한 이유는 이미지 로딩이 끝마쳤음에도 불구하고 사용자가 보는 시점에는 제대로 출력이 되지 않았기 때문이다. 로직을 뜯어보고 다른 방법으로도 구현해보았음(클래스를 사용해보려고 하는 등)에도 불구하고 한계에 직면하였다. 멘토링 경험이 있는 seohchoi님이 이 부분에 관련해서 멘토링을 받아보면 어떻겠냐고 제안을 해서, 몇 가지 질문들을 덧붙인 질문 리스트를 들고 이호준 멘토님을 찾아갔다.
“그러면 새로고침 기능을 넣으면 되잖아?”
둘 다 머리에 쾅하고 맞은 듯한 느낌이었다. 왜 우리는 이미 해결 방법을 알고 있었음에도 그 생각을 하지 못하고 빙 돌아가려고 했을까?
지금까지는 선배 개발자의 입장에서 피드백을 들어보았다면, 실직적 사용자일 카뎃들의 생각도 궁금했다. 어느 정도 초안이 완성되었기 때문에, 몇 분의 동료 카뎃들에게 보여주었다. 생각치도 못한 다양한 피드백에 당황하였지만, 지금 생각해보면 완성도있는 작품이 되는데 도움이 되었다.
다양한 피드백 중 하나가, 모바일에서 레이아웃이 깨져서 보인다는 것이었다. 지금까지 갤럭시 노트 8과 아이폰 8으로 모바일 디스플레이 폭에 맞춰서 글씨가 조절되게 테스트해왔는데, 한 줄로 보여야하는 로고가 갤럭시에서는 제대로 나오는데, 아이폰은 한 줄로 출력되지 않았다. 심지어 개발자 도구의 기기 크기에 맞춰 작업을 하여도 말이다! 다시 멘토님을 찾아갔다.
로고 이미지화 전 
로고 이미지화 후
첫번째 멘토링에서 기획과 기능 구현에 관해 말씀해주셨다면, 두번째 멘토링은 디자인과 실무에 대한 이야기를 해주셨다. 내용을 요약해보면 다음과 같다.
- 웹과 모바일 브라우저는 OS부터가 다르기 때문에 출력물이 다르다. (디바이스가 표현할 수 있는 디자인 표가 따로 존재한다고 함)
- 최대한 단순하게 해야 모든 기기에서 다 적용될 수 있다.
- 텍스트 디자인을 기기에 따라 맞추는 것은 힘들기 때문에, 그 텍스트를 이미지화한다.
- 모바일 중심으로 디자인하고 사용자의 눈을 사로잡아라.
- 실제 실무에서는 이 테스트 기간을 위해 개발 시간을 줄여야 한다고 한다.
마침 비슷한 성격의 테스트를 알게 되어 로고를 클릭해보았더니, 멘토님 말씀처럼 이미지 파일로 저장되어 있었다. 이왕이면 로고를 컨셉에 바꿔보자는 이야기가 나왔고, 출렁이는 수영장에 뛰어드는 42서울 학생들를 표현한 로고가 탄생되었다.
마지막으로 로딩 창을 비롯한 약간의 버그를 수정하고, 2020년 12월 30일 오후 5시 42분에 배포하였다. 조그마한 인증 이벤트도 같이 열었는데, 기대 이상으로 많은 분들이 참여해주셔서 얼떨떨하고 감사했다.
비록 배포는 끝났지만 이제부터가 제대로 된 시작이다. 지금까지 기능에 초점을 맞춘 코드였다면, 이제 리팩토링을 통해 소위 말하는 Clean Code로 말이다. 또한 ‘말보단 실행’이라는 말을 다시 한 번 실감중이다. 이전까지는 아이디어를 묵혀두기만 했다면, 이제는 세상 밖으로 나올 수 있게끔 말이다.
더불어, 같이 진행한 seohchoi님도 이번에 프로젝트를 하면서 다시 한 번 느낀 점은 길을 찾을 수 있도록 조언을 주시는 멘토님들과 동료들이 존재하는 환경에서 공부할 수 있어서 감사하다고 말하셨습니다.