[Figma/UI]MVP 제작(사이드 프로젝트) - 웹 디자인

올 여름에 처음으로 아이디어톤에 참가했었다. 그리고 심사위원 중 한 곳에서 우리팀의 아이디어에 관심을 가져서, 좀 더 본격적으로 MVP를 만드는 작업을 진행하고 있다. 서비스 디자인을 실제로 해보는 것은 처음이라서, 작업 속도는 느리지만 확실히 많이 배우고 있다. 약 3개월간의 작업 과정을 리뷰해보려고 한다.

 

 

나의 업무

내가 담당했던 업무들을 먼저 정리해보면, 기획 영역에 가까운 IA와 웹 디자인 작업 일부를 담당했다. 기획 부분도 웹디자인 부분도 컨펌을 해줄 담당자가 있어서, 선택장애가 오거나 작업이 막히는 순간에 실시간으로 피드백을 받을 수 있었다.  

1. Information Architecture
   1) User Persona
   2) Content map - Add UI/UX elements in frustration and goal
2. Design with
   1) Footer component
   2) Profile Page
   3) Profile Edit
   4) Reservation Calendar
   5) Error Message

 

IA 작업 리뷰

아이디어톤 때 타겟팅을 매우 모호하도 넓게 잡아두고, 발표때만 그럴 듯하게 덮어놓았었다. 흐린눈을 하고 모른척 넘어가고 싶었는데, IA 작업을 하는데 타겟팅이 명확하지 않으니 계속 뜬 구름 잡는 소리를 하는 듯한 느낌을 지울 수가 없었다. 교수님께 조언을 구하려고 연락을 드렸는데, 알맹이 없이 장황하게 설명하는 내 모습에 스스로 반성했다. (여담으로 미국에서 사는 것, 이민과 해외취업이라는 것이 한국에서 내 생각만큼 흔한 일은 아니라는 것을 상기했다. 미국에 오기 전까지는 내 주변에 외국에 사는 사람은 커녕 유학간 친구도 한 명 없고, 미국에 간다고했을 때 친척들도 사기가 아니냐고 걱정했었는데...그런 시절을 까먹은 것이다!! 지금 내 주변에는 혼자 미국에와서 잘 생존하고 있는 사람들 뿐이고, 내가 찾아보고는 사람들도 해외에서 성공한 사람들이다보니, 이민이 평범하게 느껴졌던 것 같다.) 

 

혼자서 고민한 내용과 나름의 의견을 정리해서 PM에게 피드백을 요청했는데, PM의 답변은 오히려 간결하고 명쾌했다. "투자자가 타겟팅하고 있는 시장을 1차 타겟으로 할 것." 혼자서 너무 어렵게 생각하고 있었구나?! 싶었다.

 

패스트캠퍼스 강의에서 받은 퍼소나 작업 Sheet를 바탕으로 작업을 했는데, 각 퍼소나가 어떤 부분에서 '좌절'을 느끼고, 해당 포인트에서 우리의 서비스가 어떻게 해결책이 될 수 있는지를 추가로 적었다. 고객 접점 부분을 따로 작업하지않고, 퍼소나 시트에서 한번에 해결 가능한 점이 흥미로웠다.

FIGMA JAM에서 작업한 IA

 

피그마 - UI 작업 리뷰

피그마를 눈으로만 공부했고, 주로 모바일 위주로 학습했는데 우리 팀의 MVP는 웹서비스로 진행하게 되었다. 막상 디자인을 해보려고 하니, 버튼 하나, 메뉴 바 하나 쉬운게 없었다. 다행히, 디자인팀장이 스타일 가이드와 방향성을 제시해줘서, 맡은 파트를 배우면서 디자인 작업을 하고 있다. 피그마로 실제 작업을 해보고 나니, 세상에 존재하는 웹 서비스들이 너무 대단하게 보인다. 지금 이 글을 쓰는 티스토리 글쓰기 페이지도 흰색+검정+회색으로 이루어져있는데, 보기엔 엄청 심플하고 무난해보이지만...회색이 다 같은 회색이 아니다...

 

1. 색상 감이 없음

수많은 피피티 만들 때 색조합에 소질이 없어서, 항상 추천 컬러 팔레트 조합을 만들어 놓고만들었다. 다행히, 경영학에서 쓰이는 피피티들은 어떤 기업이 주제가 되는 경우가 많아서, 그 기업의 메인 컬러들을 스포이드로 손쉽게 뽑을 수 있었다. 그러나,  내가 새로운 서비스를 만드려고 하니 색상을 직접 골라야하는데...봐도 잘 모르겠다...너무 밝은 회색은 진짜 저게 보이는가? 싶고..너무 어두우면 검정이랑 차이가 있나? 싶고.. 다행히 디자인 팀에 디자인전공 팀원과 팀장이 있어서 색상은 전적으로 그분들께 맡겼다.

 

반응형

2. Padding!!! Padding!!!! + Size여유있게 해주세요.

3개월 동안 많으면 주1-주3회 미팅을 해왔는데,  매 미팅마다 한 번도 뺴놓지 않고, Padding과 사이즈에 대한 피드백을 받았다. 내가 요소들의 간격을 너무 좁게 잡는 것이다. 이유를 생각해보니, 3가지 원인을 찾았다.
1) 습관: PPT나 요약본을 만들 때, 한페이지에 한 주제 내용을 최대한 많이 담으려고 해왔음 → 여백이 작음
2) 취향: 바른 나눔글꼴을 좋아할 정도로 tight한 글씨 여백을 좋아함
3) 작업환경: 14인치 노트북을 오랫동안 쓰고있고 웹페이지를 80%비율로 볼 때가 많음 → 화면 요소가 작은 것에 익숙함. 피그마 작업도 특정 부분을 확대해서 작업하다보니, 전체적인 느낌을 잘 확인하지 못함.

 

이게 한번에 바꾸기는 어려워서, 팀장이 수정해둔 컴포넌트를 기준으로 미니멈을 잡고 작업을 하는 식으로 의도적으로 여유를 주려고 노력했다.(하지만 여전히 요소간의 간격이 좁음)

그러다 이번에 padding의 필요성을 깊이 체감할 일이 생겼는데, 바로 Web developement 과제를 하면서이다. final 과제가 포트폴리오를 위한 사이트를 직접 HTML과 CSS로 만들어보는 것인데, 미리보기 화면에서는 충분히 크고 여유가 있어보였던 요소들이 실제 화면으로 보니 너무 빽빽하고 답답하게 보였다. 코드를 하나하나 수정하는데 얼마나 힘들던지....

 

3. 느린 손과 예측불가의 작업 예상시간

PPT는 머릿속에 샘플도 있고, 컨텐츠를 보면 머릿속에 스케치가 되며 작업시간이 어느정도 걸릴지 예상이 된다. 그리고 각종 단축키와 기능에 익숙하기 때문에, 초반에 레이아웃과 컨셉만 정하면, 후반 작업은 빨리 끝낼 수 있다. 그런데 웹디자인 및 피그마는 그렇지가 않다. 일상에서 웹사이트를 볼 기회가 많으니 웹사이트 디자인에 익숙하다고 생각했는데, 막상 작업을 하려고 하면 머릿속에 그려지는시안이 없었다. 그리고 피그마와 같은 툴을 제대로는 처음 써보다보니, 어떻게 해야 효율적으로 작업할 수 있는지 떠오르지 않는다. 결국 일단 만들어보고, 오토 레이아웃을 걸었다가 풀었다가, 컴포넌트로 만들었다가 새로 만들었다가...하루종일 컴터 앞에 앉아 있었는데, 바뀐건 몇개 없어서 속상하기 도하다. 3개월 쯤 지나고, MVP 디자인 작업 막바지에와서 몇가지는 조금 감을 잡은 것 같다.

1) Status가 변하는 요소는 개별적으로 Component 만들기
: Active - Inactive - Hover - Click 등의 상태 변화가 필요한 기능들은 처음부터 컴포넌트로 작업해두면, 차후 수정이 편리하고 Portotype을 연결할 때도 유용하다. 예를 들어, 달력에 날짜를 이동하는 < > 버튼은 별도의 컴포넌트로 관리하면, Hover와 같은 상태를 표시하는 작업을 prototype으로 쉽게 연결해둘 수 있다.

2) 반복 되는 페이지에서 큰 레이아웃은 Component로 만들기

: 디자인 마지막에 최종적으로 Prototype을 시각적으로 보여주려면, 결국 User의 사용 화면을 하나씩 보여줘야한다. 컴포넌트가 아닌 채로 동일한 페이지를 여러개 복사했는데, 중간에 레이아웃이나 글꼴 등등 하나를 수정하게되면....N번을 다 바꿔줘야한다....!

3) 디자인 통일성

: 우리는 ant.design의 컴포넌트를 레퍼런스로 많이 사용하고 있는데, 내가 독자적으로 특정 페이지의 버튼이나 칩 디자인을 할 때가 있었다. 이게 그 페이지만 볼때는 문제가 없어보인다. 하지만 웹사이트에서 User들은 여러 페이지들을 계속 왔다갔다 하기 때문에 다른 페이지와 다른 느낌의 디자인은 어색하고 불편하게 느껴질 수 있다. 여러명이 작업할 때는 새로운 페이지를 디자인 할 때마다, 다른 페이지를 먼저 면밀하게 파악하는 자세가 필요했다.