• date: 2018-11 ~ 2018-12
• work position: html, css 퍼블리싱
• url: https://www.afoter.com

애포터 서비스는 성형수술을 하고난 후에 나타나는 증상들을 기록하고 멍, 붓기, 흉터같은 부분들을 체크하여 성형 부작용을 빠르게 예방하기 위하여 만들어진 앱이다.
성형은 관심이 없는 분야였지만 수술을 받고나서 서로 고민을 공유하고 풀어갈 수 있는 공간을 제공한다는것이 꽤 좋아보였다.

모바일 앱이지만 웹으로 만들어놓고 웹을 앱으로 감싸서 사용하는 웹앱 형식으로 개발한다고 해서 평소 웹 개발하듯이 주로 html,css 파트를 맡게 되었다.

웹은 vue.js 자바스크립트 프레임워크를 이용해서 개발한다.
최근들어 vue.js로만 작업하다보니 차라리 잘됐다 싶었다. 개발과 퍼블리싱을 따로 나누어서 작업하면 버전관리와 퍼블리싱 결과물이 개발쪽으로 넘어가버리면 더이상 손을쓸 수 없는 치명적인 결점을 해결할 수 있는게 react나 vue같은 자바스크립트로 웹을 만드는 방식이 제일 괜찮은 작업 방식이라고 생각한다.

디자인 분석

계약전에 처음 클라이언트와 개발팀과 미팅할때 대부분의 화면들이 디자인이 만들어져 있었다.

모바일 앱 전용으로 만들기 때문에 기술적으로 어려움이 없어 보였다.
색상은 젊은 여성에게 타게팅을 한듯이 과감하게 보라색을 주 컬러를 사용했다.

실질적으로 작업 시작하면서 뭔가 너무나도 이상하다고 느껴왔던 부분이 글자들이 보통 사용하던 크기보다 많이 작았다.
일단 이슈는 올려두고 젊은 사람들이 사용하기 때문에 일부러 글자를 작게 디자인했다고 생각하고 계속 진행했다.

하지만 다 만들고 우려했던 불안감은 현실이 되었다.

본격적인 개발

이유는 알 수 없지만 애포터 개발팀에서의 요구로 퍼블리싱 작업을 위하여 별도의 프로젝트를 만들고 작업을 위한 준비를 했다.

그래서 작업환경을 구성하는데 퍼블리싱 위한 환경을 만드는것 뿐이라 빠르고 쉽게 구축하기 위하여 vue-cli를 설치하고 작업 프로젝트를 만들었다.

웹이 아닌 모바일만 집중하면 그만인 작업이라서 개발에 크게 제약이 없었다.
상대적으로 웹보다 모바일이 좀더 최신 기술이 들어간 상태이다 보니 좋은 기술들을 부담없이 사용할 수 있었다. 다만 주의해야할점은 웹에서 터치 이벤트 처리하는 부분에 대해서 기능이 성숙하지 않은 부분이 많기 때문에 신경 써줘야 할 부분이 많다. 무엇보다 네이티브 앱과같은 효과를 포기해야할때가 많다.

작업하면서 가장 어려웠던 부분은 글자가 생각 이상으로 작았다는 부분과 글자 사이즈나 간격 수치들이 소숫점이 많이 보였다.
소숫점은 적당히 반올림해서 작업하겠다고 했고, 사이즈는 별다른 피드백이 없어서 디자이너의 의도라고 믿고 쭉 작업했다.

어려운 구조가 아닌 디자인이어서 퍼블리싱 작업은 어렵지 않게 해결할 수 있었다.

이미지 크롭과 드로잉 기능 만들기

작업 마지막에 이미지 크롭과 그리기 부분을 개발을 하게 되었는데 내가 할 영역은 아니었지만 재미있어 보여서 덤벼들었다가 한동안 끙끙 머리를 싸맸다.

클라이언트도 기능 구현에 양보할 수 없는 부분이 상당히 들어가 있어서 터치 환경에서 사진을 크롭하고 그리기를 어떻게 구현할까 고민하면서 그리기와 크롭 라이브러리를 찾아보니 둘다할 수는 없다는 결론이 나왔다. 그래서 크롭과 그리기 과정을 나누어서 따로따로 구현하고 결과물을 전달해주는 방법으로 구상하고 먼저 사진을 크롭하고, 크롭한 이미지 영역에서 그리기 인터페이스로 넘어가서 손가락으로 그릴 수 있도록 기능을 구상했다.

이미지 크롭 라이브러리를 찾아서 어찌 기능은 만들었지만 드로잉 라이브러리가 목적에 맞는게 없었고, 그리기에 대한 원리와 기초적인 소스만 존재했다.
찾아본것들을 토대로 그리기는 직접 개발해보았다. 시간은 꽤 걸렸지만 마음에드는 수준으로 기능을 만들 수 있었다.

다듬기

퍼블리싱 작업을 다 끝내고 개발 작업하면서 조금씩 수정작업을 하고 있다가 개발팀에서 퍼블리싱한 프로젝트에서 변경점이 있는 소스를 가져오는게 힘든지 개발하는 프로젝트에 들어와서 작업해달라고 하여 개발 프로젝트로 옮겨서 계속 수정 요구가 들어오는 부분들을 작업했다.

개발이 거의 끝난 시점에 작업을 시작할때 일어났던 불안감이 현실이 되었다.
디자이너가 만들어진 개발버전의 앱을 확인하고 글자 크기를 잘못 정했다고 깨달았는지 글자들을 전부 키워야겠다고 한다. 한두군데 수정도 아니라서 매우 오래걸릴거라고 예상한다고 말해주고 어쨋든 고쳐야 하는 부분이니 하나씩 고쳐보자고 마음먹었다.
디자인 수정작업을 다 끝날때까지 기다리고(회사에서 제플린 알림 울릴때가 제일 힘들었음) 주말쯤에 한번에 작업했다.
코드만 고치고 끝나는게 아니라 모든 화면을 다시 확인해가면서 고치다보니 자연스럽게 많은 시간을 필요로 하는 작업이 되었다.

다음으로 애먹었던 수정작업은 팝업으로 사용하는 영역이 스크롤이 되는데 아이폰에서 스크롤하다보면 가려진 부모영역이 스크롤 되는 현상이 일어난다. 레이어가 중첩으로 띄어져 있을때 특히 iOS에서 스크롤 영역에 관해서 일어나는 현상인데 말끔하게 해결된 케이스는 본적없는 패턴이었다.

항상 이 문제를 겪을때마다 난감해지는 문제여서 완전한 대처가 무리였다. 이런 케이스를 보면 앱은 네이티브로 만들거나 구조를 단순하게 구성하는게 좋지 않을까 생각하게 된다.

마무리

주말과 일과 이후의 시간만으로 상당히 빠듯했지만 어떻게서든 퍼블리싱 작업을 먼저 마무리 짓고 3월에 앱이 스토어에 등록이 되었다.

웹 형식으로 무리하게 구현된 부분이 존재하지만 지금까지의 작업 경험으로 완성은 하게 되었다. 하지만 이게 잘 굴러갈런지는 운영에 따라 달린 일이겠지만..

이렇게 내가 할 일들중에 하나가 이렇게 맺음이 이루어졌다.