들어가며

다행히 면접을 통과하고 실무 과제를 받았다. 근데... 사실 웹 페이지 만든지 조금 오래됐다. 마침 면접도 봤으니 내일은 웹 앱이나 만들어볼까~ 생각했는데 그 다음날 결과 나왔다고 3일안에 웹 앱을 만들라는 미션이 떨어졌다. 아이고오...

과제 내용

자세한 내용을 쓸 수는 없지만, 키오스크 같은 메뉴판이 메인인 기업답게 키오스크 웹 앱을 만드는 미션을 받았다. 거기에 Atomic Design 을 적용하면 좋다고 한다. 그리고 디자이너 협업 툴인 Zeplin 사용을 하라는 내용도 받았다. 처음 접하는 내용이 많구나.

막혔던 부분

클론 코딩은 처음이라 시작부터 조금 막막했다. 뭘 어떻게 시작하지? 일단 create-react-app 부터 시작해서 가장 기초를 만들었다. 그리고 어... 일단 분석을 하자. 목업으로 준 앱이 있어서 잔뜩 분석했다. 여기서 이렇게 나눴고 이런게 필요하구나.

근데 Zeplin은 또 뭐람? 찾아보니 디자이너와 개발자가 협업하기 위한 툴이다. 놀라웠던 부분은 CSS 코드가 그대로 다 들어있다는 점이었다. 너무 좋은데? 하지만 보다보니 아쉬운 부분도 보였다.
Zeplin의 원리는 포토샵이나 일러스트레이트같은 그래픽 툴에서 뽑아온 페이지를 CSS와 HTML로 구현한다. 그래서 상세한 문서 구조나 컴포넌트 동작을 확인할 수는 없었다. 오직 HTML, CSS 정보만 있다. 그래도 이게 어디야. 정말 혁신적인 툴이다. 이게 실무 경험이구나.

마지막으로 Atomic Design에 대해 찾아봤다. 네이버 라인에서 적용했던 경험을 발표한 영상이 있는데 그 영상이 도움이 됐다. 알고보니 이전 프로젝트에서 관련 내용을 쭉 조사한 팀원이 작성하던 코딩 방식이다. 덕분에 나도 그 패턴을 어느정도 익히고 있었다.

밑작업

다시 레이아웃 분석을 했다. 이 과정에서 잊혀졌던 감각이 새록새록 살아났다. 이렇게 구성하는거였지. 마치 자전거 타는 법을 기억하듯 자연스럽게 감각이 돌아왔다. 가장 처음 밑바닥을 그리고 박스를 배치하고 확인한다. 그 이후 로직 부분은 자신있으니까 꾸미는 부분만 감각이 돌아오면 괜찮다.

디렉토리 구성도 Atomic 스럽게 원자 분자 유기체 단위로 나눠놨다. 재밌어졌다. 이렇게 구현하면 어떤 장점이 있을까. 정말 깔끔할 것 같다.

마치며

이렇게 하루종일 뽈뽈대니 벌써 새벽 4시다. 과제를 받아서 하루종일 개발하니 마치 부트캠프 수료 프로젝트를 하는 기분이 든다. 답답한 알고리즘만 해서 그런지 마냥 재밌다.
그리고 이런 작업을 혼자 하는 것도 오랜만이다. 아니 처음인가? 부트캠프에선 항상 2인 1조를 만들어줬다. 혼자 만들어서 장점은 내 스타일 100%로 코딩할 수 있다는 것. 나에게만 집중하면 된다는 점. 단점은 내가 막히면 조언해줄 팀원이 없고 결정적으로 조금 외롭다. 창작은 혼자 하는게 아니라고 했는데 정말 맞는 말이다. 오늘은 재료 준비에 밑작업을 했으니 내일 대부분의 기능을 완성해야 된다. 할 게 많구나. 얼른 자야지.