• date: 2018-12 ~ 2019-02
• work position: html/css 퍼블리싱
• URL: https://www.freshcode.me

프레시코드라는 서비스는 샐러드를 판매하고 배달해주는 서비스라고 볼 수 있다.
이미 서비스가 운영하고 있지만 리뉴얼하는 프로젝트에 참여하게 되었다.

처음 미팅을 할때 상당히 디자인 작업이 꽤 진행되어 있었는데 반응형으로 작업해야해서 모바일과 데스크탑 디자인들이 만들어져 있었다.
디자인 결과물은 잘 만들어졌지만 요소들이 너무 많아서 엄청 복잡하고 이것들을 무리하게 모바일 화면에도 그대로 집어넣다보니 구현은 둘째치고 사용성에 불편한 요소들이 많이 보였다.
개발에 가장 큰 문제는 팝업 레이어로 처리한 화면들이 상당히 많다는 것이다.

디자인을 본 첫인상은 디자인은 잘 만들어졌지만 외줄타는듯이 아슬아슬하게 많은 요소들이 배치되어있는 느낌을 많이 받았다.

디자인만 보더라도 이걸 구현을 한다고 하더라도 무리가 생길것이라는 예상이 나오기 때문에 작업은 처음에 거절했다.
하지만 설득당해 기간을 충분이 잡고 작업하는 조건으로 계약하게 되었다.

기간은 총 3개월로 작업하게 되었다.

디자인 분석

모바일은 더욱 앱같이 만들어지고 데스크탑은 더욱 웹같은 형태의 디자인이다. 따로 만든다면 그대로 적용하면 되겠지만 반응형웹이라서 둘다 맞추기가 어려운 형태가 많이 보였다.

디자인 화면들을 다시 천천히 보면서 코딩할 구조들을 생각해보았다.
디자인 자체는 흠잡을데가 없지만 요소들이 괴랄하게 많은게 큰 문제여서 반응형에 문제없도록 컴포넌트들을 구상했다.

레이어 창이 뜨는 화면에서 구현이 불안불안 했었는데 작업 후반에 많은 문제를 일으켰다.

구현을 데스크탑과 모바일을 한꺼번에 고민하다보니 잡생각이 많아져서 오히려 구조를 망가뜨릴거 같은 기분이 들어서 모바일 화면을 먼저 작업했다.

퍼블리싱 작업

요즘은 모바일 퍼스트라고 해서 모바일 화면을 먼저 작업하고 화면이 커질때의 모습을 대처하는 작업방식을 많이 사용한다.

일단 페이지가 워낙 많고 모바일과 데스크탑의 요소들의 갯수가 거의 똑같은 모습이 대부분이다.
모바일 화면은 작고 손가락으로 터치하는 방식이라서 요소를 단순하고 적게 배치해야하는데 모든 요소들이 다 필요한지 모두 구겨넣어 버렸다. 그 댓가는 결국 개발자와 이용자에게 고통으로 돌아온다고 생각한다. 그래서 상당히 도전적이고 고통스럽게 작업한 편이다.

초반에는 빠르게 코딩하기 위하여 공통 컴포넌트 같은것들은 크게 신경쓰지않고 개발이 가능한 화면부터 빠르게 쳐내면서 컴포넌트의 패턴이 보이면 작동만 되는 수준으로 컴포넌트로 변환하고 리팩토링 했다.

상품 주문과 지도와 관련된 부분은 최고의 난관이었다.
지도와 컨텐츠가 섞여있고, 레이어 팝업이 나오기도 하고, 데스크탑 화면으로 변하면 레이어 팝업이 아니게되는 난패턴이 만들어진다. 최대한 생각하고 생각해서 어떻게서든 만들긴 했지만 지도 덕분에 성능 이슈도 생기기도 하고 모바일 특성으로 화면상에 문제가 생기기도 하는.. 복잡한 화면에서 조율하는데 많이 애먹기도 한다.
어떻게든 구현은 했지만 일관적인 UI 방식으로 만들지 못한 기획에 많은 아쉬움이 있었다.

다행인점은 개발 프로젝트에서 바로 작업할 수 있어서 개발 작업하는데 문제점들을 바로 피드백을 받고 수정을 할 수 있다는점에서 좋았다. 그 부분에서 nuxt.js 프레임워크 선택은 좋았다고 생각한다.
개발 과정에서 일어나는 오류의 모습들도 같이 보는 문제도 있지만 퍼블리싱 작업된 부분에서 문제가 일어나도 프론트엔드 개발자가 수정하거나 내가 직접 수정하면서 반영할 수 있다는 점에서 퍼블리싱도 프론트엔드 개발에 같이 작업한다는 방식이 가장 낫다고 생각한다.

모바일 페이지들을 작업하면서 기초적인 요소들을 제작해두고 데스크탑 화면들을 보면서 그에 맞도록 스타일들을 패치해나갔다.
구조적으로 문제가 생기는 부분들은 다시 손보면서 브라우저 사이즈가 변했을때 이상이 없도록 스타일과 dom 요소들을 조정해가면서 완성해간다.

마무리

퍼블리싱 작업만 한다고 하지만 50페이지 이상되는 반응형 페이지들을 작업하려니 많은 시간이 소요되다보니 잠자는 시간, 회사에 있는 시간을 제외하고는 전부 이 작업에 매달렸다.
꼼꼼한 성격 덕분에 더 많은 시간이 들어갔는지도 모르겠다.

처음에 이 일을 소개받았을때 과연 할 수 있을까라는 생각밖에 안들었는데 2개월 후에는 어떻게든 결과물이 만들어져 있다.
역시 어떻게든지 만들어지는거 같다.

개인적으로 테스트 과정이 상당히 아쉬웠다.
혼자서 작업하면서 테스트를 할 수 없고, 개발측에서 테스트에 대한 피드백이 잘 이루어지지 않았다.
데스크탑 브라우저는 IE11까지 대응하기로 처음에 정해졌고, 모바일은 기준이 없었고 개인적으로 모든 아이폰이나 안드로이드 기기를 가지고 확인해볼 수 있는 환경이 아니라서 개인적으로 사용하는 아이폰으로 일부 화면들만 확인해볼 뿐이어서 테스트의 피드백에 의존할 수 밖에 없는 형편이었다.

작업이 끝나고 컴포넌트와 퍼블리싱 관련 요소들에 대한 문서 작업을 하느라 테스트에 참여할 여력이 없었다. 무엇보다 작업하는 사람보다 다른 사람이 테스트를 하고 리포트를 해주는게 더욱 적합하다고 생각한다.

개인적인 사정으로 서비스를 만드는데까지 참여를 했지만 계속 서비스를 리팩토링하고 UI를 개선하면 사용하기 괜찮아질것이라고 생각한다.

나중에 모바일 앱이 따로 만들어지지 않을까 예측을 해본다.
하지만 이번에 만든 서비스대로 앱을 만든다면 현재 서비스보다 나아지지 않을 것이라고 본다.

이번 작업의 글들이 전부 투덜대는 내용들 뿐이지만 만드는 일에는 최선을 다했다. 하지만 좋은 결과물이라고 할 수 없다는것이 조금 아쉬울 뿐이다. (디자인은 잘 만들어졌지만 서비스 이용하기가 편리하다라고 생각하긴 어렵다.)