디자인하는 프론트엔드

개발 과정에서 겪은 문제와 고민, 선택한 해결 방법과 그 이유로 주제를 선정해서 글을 작성해보려 한다. 사실 이 이야기는 개발을 시작하려고 보니 겪은 문제와 고민에 가깝기는 하다.

먼저 지금 하고 있는 프로젝트에 대해 간단하게 소개해보자면, 동아리의 프로젝트 대회에 참여하여 시작하게 된 프로젝트이다. 팀원은 프론트 한 명, 백 한 명, 디자인 한 명으로 구성되어 있다. 프로젝트를 처음 해보는 사람들도 참여할 수 있도록 계획된 대회였기 때문에 리액트를 다룰 수 있는 프론트엔드가 없어서 우리팀의 프론트는 나 하나로 구성되었다.(이번 대회에서 node.js를 다루는 백엔드도 우리팀 백엔드 한 명 뿐인 것으로 안다.)

사건의 발단

7/2(화)

6월 말 시작된 프로젝트 대회에서, 우리 팀은 프로젝트 마감기한이 8월 중순인 데에 비해 꽤 빠르게 작업을 마쳤다. 이미 아이디어가 확정된 상태로 시작했기에 다른 팀들은 아직 아이디어를 내고 있을 시기인 7월 2일에 첫회의를 시작해 기능명세서까지 완성하였다. 그래서 우리 팀의 목표는 빠르게 프로젝트를 마무리하여 여유를 두고 프로젝트를 제출하는 것이 목표였다.

7/4(목)

백엔드의 API 명세서까지는 별 문제가 없었다. 7월 4일 API 명세서를 완성하여 보내주셨고, 명세서에 대한 의문점이나 작은 문제들은 소통하면서 잘 해결이 되었다.

7/25(목)

하지만 디자인은 몇 주 뒤 피그마에 와이어프레임이 올라오는 듯 하다가, 'edited 8 days ago'라는 문구가 띄워진 상태로 남겨졌다. 디자인 마감 기한은 8월 2일이었고, 디자인 마감 후 주어진 개발 기간은 겨우 2주였기에 카톡으로 디자인 작업이 완성되는 대로 개발을 시작하겠다고 얘기했다.

7/28(수) - 문제 발생

7월 28일, 피그마에 아무것도 업데이트되지 않은 점에 의문을 가진 채로 디자이너에게 피그마 권한 요청을 부탁드렸다. 그러자 새로운 피그마 링크를 보내주시면서 오늘까지 완성해주시겠다고 했다.
하지만 해당 피그마 안에 있던 디자인은... Adobe로 작업한 후, 캡쳐하여 피그마에 붙여넣은 사진이었다. 하나가 5000픽셀이 넘는...🥲 요소의 색, 크기나 폰트와 폰트 사이즈를 알 수 없었을 뿐만 아니라 사용자 입력을 받아야 하는 화면인데, 배경이 그라데이션에 입력창과 글씨가 회색이라 눈에 잘 들어오지 않았다.
또한 기능명세서에 적혀있는 대로 디자인이 되어있지 않았다. 기능명세서를 작성할 당시, 사용성을 생각하여 버튼 타입과 대략적인 디자인 정도는 결정을 했었다. 라디오 버튼의 경우에는 버튼 옆의 동그란 체크 표시를 없애고 글씨 전체를 둘러싼 사각형 모양의 버튼으로 만들기로 했었다. 기능명세서에는 해당 디자인을 '라디오 버튼(그냥 버튼 모양)'이라고 통일해서 적어놓았으나, 이러한 사항이 지켜지지 않았었다. 물론 그 외에 기능명세서에 적혀있었으나, 빠진 기능들도 있었다.

문제 분석과 고민

일단 디자이너가 프로젝트 경험이 있었지만 피그마에 캡쳐한 사진을 올린 원인은 해당 프로젝트에 참여한 사람들 모두 첫 프로젝트여서 그랬을 가능성이 크다. 나도 첫 프로젝트를 할 때 아무도 피그마를 알려주지 않았다면 그냥 눈대중으로 확인하고 개발을 했을 것이다.
두번째로, UI/UX적으로 좋지 않았던 디자인의 원인은 다른 디자인을 참고를 하지 않아서라고 생각한다. 사실 웹/앱 디자인을 오래 해봤거나 많은 웹/앱 디자인을 접해봤다면 굳이 참고를 하지 않고도 UI/UX적으로 좋은 디자인을 쉽게 해나갈 수 있을 것이다. 하지만 대학교에 입학한 지 겨우 5개월이 지났는데 아무것도 참고하지 않았다면 이게 쉬울 리 없다.
마지막으로, 기능명세서를 제대로 이해해지 못했던 이유 중 하나는 회의를 열심히 듣지 않아서 그랬을 가능성이 크다.(디자이너도 회의를 열심히 들어야하는 이유)

그래서 일단 카톡으로 처음부터 피그마로 작업해야하는 이유를 설명해줬고, 디자이너는 내일까지 다시 피그마로 작업을 완료하겠다고 했다.

또한 피그마의 코멘트 기능을 이용해 기능명세서와 다른 부분을 피드백했다.

지금은 이전 버전의 디자인이 삭제되었지만, 그때 달았던 코멘트들이다.

그렇지만 차마 디자인에 대한 문제를 제기하기가 쉽지 않았다.

만약 프론트엔드가 디자인을 받았을 때 디자인을 완전히 엎어야 할 것 같다면 어떻게 해야하는가?

1. 프론트엔드 마음대로 디자인을 바꾸어가며 완성한다.
   -> 내가 디자이너였으면 기분이 정말 나쁠 것 같다. 기껏 구상해서 디자인해놨는데 말도 없이 디자인이 싹 바뀌어있다? 너무 싫다.
2. 디자이너에게 이유를 설명해가며 디자인을 처음부터 다시 해야할 것 같다고 한다.
   -> 내가 디자이너였으면 힘이 빠진다. 게다가 디자인이 완성되었는데 또 UI/UX적으로 좋지 않다면 디자인 제출이 일주일도 남지 않은 시점에서 참사다.
3. 디자이너에게 이유를 설명하며 옆에서 바로바로 피드백해줄테니 같이 디자인을 하자고 한다.
   -> 나와 디자이너 모두 조금 힘들 수는 있겠지만, 내가 디자인에 관심이 있기도 했고 이렇게 하면 그때 그때 수정해나갈 수 있다.
4. 그냥 그대로 개발한다.
   -> 물론 그냥 안고 가는 방법도 있다. 이렇게 하면 디자이너와 갈등이 생길 일은 없다. 하지만 3월부터 쭉 하고 싶었던 프로젝트 주제이고, 상을 수상하고 싶었기에 그냥 안고 가고 싶지는 않았다.

(더 좋은 방법이 있다면 알려주세요! 제발...)

해결방법

이제 제목이 왜 디자인하는 프론트엔드인지와 내가 한 선택을 알 수 있을 것이다.

디자이너와 통화를 했다. 피그마에 내장되어있는 모바일 프레임에 대해서도 설명해주고, 기존 사이트들을 참고하는 것도 좋다고 얘기해줬다.

사실 통화 전에 뭐가 문제인가 싶어서 기존 디자인의 색상을 살려서 새로 시작화면을 구상해봤었다. 다행히 디자이너가 해당 디자인이 마음에 든다고 해당 디자인을 바탕으로 작업을 하고 싶다고 얘기해주었고, 이를 바탕으로 함께 작업을 하기로 했다.

그냥 어떤 걸 했는지 궁금한 사람들을 위해서...

내가 피그마로 디자인한 버튼이다. 그냥 사각형 버튼 아니냐고 할 수도 있겠지만 나름 클리핑마스크에 대해도 찾아보고 별도 사각형 수정해서 열심히 만들었다. 포토샵도 못다루는 나에게는 엄청난 발전이었다.

내 디자인을 디자이너가 수정해주기도 했고, 디자이너의 디자인을 내가 수정하기도 하면서 디자인을 (대략) 완성했다.

(왼) 수정 전 디자인 (오) 수정 후 디자인
문구도 수정했으나 원본에서 수정해서 이전 버전은 안 남아있음
수정 사항이 크지 않은 디자인을 가져왔지만, 아이폰 기본 알림 디자인 같은 팝업에서 해당 디자인에 부합하도록 팝업을 수정하기도 하는 등 거대한 변화도 많았다.

결론적으로 같이 디자인하기를 잘했다고 생각한다. 물론 내가 모든 프로젝트에서 해당 해결방법을 사용할 수는 없을 것이다. 하지만 이번 한 번 정도는 좋은 경험이었다고 생각한다. 조금 힘들긴 했어도 덕분에 피그마를 다룰 줄도 알게 되었고, 처음 해보는 디자인도 재미있었다.
하지만 이와 같은 문제가 다시 발생한다면, 어떻게 해야할지 또 고민하게 될 것 같다.

P.S. 만약 해당 프로젝트가 성공적이라면 올해 홍대 축제 동아리 주점(동아리명은 문의 바람)에서 해당 사이트를 만나볼 수 있을지도 모른다.