brunch

You can make anything
by writing

C.S.Lewis

by 호우호우 Apr 16. 2023

사이드 프로젝트로 레벨업 하기 - 5장

비사이드 참여기 5. 디자이너와 협업

프로젝트에 필요한 기획문서가 얼추 마무리됐다. 개발자와 디자이너는 기획자가 그린 설계안을 보며 어떤 식으로 앱을 만들어 가야 할 지 고민한다. 그 과정에서 기획자에게 묻는다. 계속 묻는다(안 물어보면 이상한거다). 이건 어떤 기능인지, 인터랙션은 어떻게 되는지, 누르면 어디로 이동하는지, 예외 케이스에 대한 설명은 어느 장표에 있는지 끊임없는 질의타임이 시작된다. 특히 디자이너와 협업하며 인상적으로 느껴졌던 순간이 몇 번 있었다.



설계서대로 디자인하지 말 것

설계서대로 디자인하지 말라는게 뭔소린가? 싶을 수 있다. 그치만 설계서대로 디자인하면 기본적인 레이아웃과 컴포넌트 크기가 안 맞을 수 있으며 디자인 완성도가 떨어져 보인다. 설계서는 말 그대로 설계서다. 수많은 고연차 기획자 선배님들이 아직까지 PPT를 고수하는 이유 중 하나가 PPT로 디자인한 앱과 웹은 이쁘지 않기 때문이다.

디자이너 입장에서 '와꾸'만 있는 설계서를 보면 대략적인 기획자의 의도를 알 수 있다. '와꾸'를 보며 미학적, 심미적으로 보기 좋은 UI와 GUI를 고민한다. 이 과정을 방해하지 않기 위해 기획서는 핵심 컴포넌트를 제외하곤 되도록이면 흑백으로 작업하고 화면 비율도 모바일과 상이하게 작업한다. 디자이너의 역량과 퍼포먼스를 최대한 방해하지 않기 위해서다.

하루냥 앱 디자인 초반에 전달을 충분히 하지 않아서 기획안대로 디자인될뻔한 적이 있었다. 다행히 핵심 화면은 아니었지만 첫 단추를 잘 꿰어야 이후가 잘 흘러가기 때문에 그 주 회의 때 강하게 말했다.

설계서대로 디자인하지 마세요! 최대한 디자인 퍼포먼스를 끌어올려서 작업해주세요. UX적으로 보충이 필요한 화면이 있다면 피그마 코멘트로 남겨주세요!



백지장도 맞들면 다.

디자이너는 설계서와 프로세스, 정책을 보며 화면을 디자인한다. 그 중 가장 많이 보는 문서는 단연코 화면설계서인데, 설계서를 바탕으로 화면을 디자인하는 과정에서 기획자, 개발자와의 티키타카가 많이 일어난다. 이 과정에서 설계서가 참~ 많이 수정됐다. 기획자가 고려하지 못한 촘촘하고 세밀한 부분을 디자이너가 캐치해준다. 화면 별 전환 인터랙션의 모션이나 UI 출현 시 duration time, start delay같은 모션 영역도 지적해줬다. 여러 피드백을 오가며 설계서가 고도화되었고 개발자, 디자이너 간 의사소통도 명확해졌다.

점점 디벨롭되어가는 결과물

멤버들별로 생각이 각자 달랐지만 하루냥 앱을 성공적으로 런칭하자는 목표는 확실했다. 주요 화면인 일기 작성과 일기 열람에서 일어나는 인터랙션과 UI에 대한 고민은 서비스의 가치를 잘 전달하기 위해 필수불가결이었다. 디자이너는 사용성과 심미성의 시선에서 UI, 기능(아이디어)을 제안하였고 기획자와 개발자는 개발 가능 여부, 일정 이슈, 서버 이슈를 고려해 아이디어를 수용하거나 backlog로 미뤘다. 비사이드는 14주 프로젝트였기 때문에 일정을 가장 많이 고려했다. MVP 수준이라도 좋으니 런칭을 한 뒤 사용자 반응을 보며 고도화하자는 의견을 제안했고 디자이너와 개발자도 그 의견에 동의해 모두가 한 마음 한 뜻으로 작업했다.



개발자의 마음도 고려할 것

기획과 디자인에서 제아무리 사용성이 좋은 UI와 GUI를 제안했다고 해도 개발이 힘들면 말짱 도루묵이다. 하루냥에는 날짜 이동 시 bottom sheet가 올라와서 날짜를 scroll하는 UI를 쓰고 있다. 처음에 이 UI를 제안했을 때 프론트에서 난감해했다. 관련 API가 없어서 여차하면 직접 구현해야 한다는게 이유였다. 디자인과 기획이 아무리 잘 나와도 실현 가능성이 있어야 한다. 그 실현 가능성을 알려면 개발자와 계속 소통해야 한다. 우리 팀은 슬랙과 피그마 코멘트를 거의 남발하듯 소통했다. 화면설계서 완성될 때, 피그마에 화면 디자인이 끝날 때 항상 개발자에게 알림을 주었고 개발자는 이를 보고 수용 여부를 판단했다. 특히 디자인 쪽에서 욕심을 내는 경우에 개발에서 커트를 해야 하는데 여기서 제 3자인 기획자의 역할이 중요하다. 아기를 정확히 둘로 나누라는 솔로몬 왕처럼 현명하고 공정한 판단은 내리기 힘들어도 구체적인 사유를 알려줘야 한다. 관련 API를 찾기 힘들어서 다른 UI를 제안한다던지, 일반적인 인터랙션으로 대체가 가능한지, UI 없이 표현할 수 있는지 끊임없이 고민을 해야 한다.

실현 가능한 결과물을 제안하기 위해 끊임없이 개발자를 괴롭히자(?)




하루냥 앱 다운로드 링크

안드로이드 다운로드

iOS 다운로드

매거진의 이전글 사이드 프로젝트로 레벨업 하기 - 4장

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari