내편 UI 개발기

프로젝트를 진행하기 전 가장 막막했던 부분이 UI 개발이었다. 디자이너분이 주신 디자인을 따라 구현하거나, 기존에 존재하는 사이트들을 따라만들기만 해본 터라 어디서부터 시작해야할지 감이 잡히지 않았다.
직접 figma를 사용해보는 것도 처음이었고 이뻐야 만들 맛이 나는 사람이라 이쁘게 만들고 싶었다. 일반 사용자가 볼 때 가장 영향이 큰 부분이랑 생각되어 고민을 다양하게 하는 것이 맞다는 생각도 들었다. 시간을 많이 잡아먹었지만 나름 즐기면서 작업을 이어나갔기 때문에 이 과정을 글을 남겨본다.

 

초기 프로토타입

백엔드 팀원과의 소통을 위해 소피아가 만든 프로토타입이다. 디자인은 전혀 신경쓰지 않은 채 플로우를 이해하기 위해 만들었다. 팀원들과 공유하며 각자 프로젝트에 대해 가지고 있던 의견과 방향성을 맞추는데 사용하였다. 말로만 진행하는 것이 아니라 시각자료를 통해 소통하다 보니 각자 가지고 있던 의견들을 쉽게 말할 수 있었고 의견의 차이점을 찾는데도 용이했다.
프로토타입을 보며 스프린트1의 목표 구현사항을 정할 수 있었고, 어떤 API가 필요한지 페이지별로 하나하나 확인하며 정리할 수 있었다.

 

1차 디자인

1차 스프린트까지 사용한 디자인이다. 최대한 디자인적인 요소를 고민하지 않기 위해 단순하게 만들었고, 색상도 거의 사용하지 않았다.
UI적으로는 고민거리가 별로 없었고 AutoCompleteSearchInput의 구현과 Input 컴포넌트간의 차별점에 대해 고민했었다. 디자인을 단순하게 만들어서 시각적으로는 동일해보이는 컴포넌트들이 많았는데 이를 어떻게 분리할지도 페어와 다양하게 이야기했던 것 같다.

 

2차 디자인

1차 스프린트 후 프로젝트에 매력을 더하기 위해서는 디자인적인 요소가 더해져야겠다고 느꼈다. 레퍼런스도 다양하게 찾아보고 관련 아티클도 읽으면서 디자인을 진행해보았다(https://brunch.co.kr/magazine/d-archive 이 글들을 재미있게 읽었다) 다행히 팀원들이 새로 만든 디자인을 좋아해 주었고 이대로 프로젝트를 이어나가게 되었다. 자연스럽게 팀의 색상도 정해지게 되었다(#98DAFF)

정해진 색상을 컬러팔레트로 정리하였다. 이를 theme으로 정리하여 계속해서 사용했다. 소피아가 figma에서 컴포넌트화하는 방법을 알려주어 유용하게 사용했다. 컴포넌트화하면서 figma가 생각보다 더 많은 기능들이 있다는 생각이 들었다.

 

Header, Tab bar

이때 가장 고민했던 부분은 Header를 어떻게 하고 Tab bar를 넣을지 말지였다. 모바일 default로 개발을 진행하고는 있었지만 반응형으로 만들고 있었기 때문에 tab bar가 있는 것이 좋을까에 대해 소피아와 많은 이야기를 나누었다. 모든 페이지에서 tab bar가 보여야 할지 선택적으로 보여줄지도 고민이었다.
Header의 경우에는 어떤 곳에는 뒤로가기 버튼이, 어떤 곳에는 뒤로가기 버튼이 없는데 이를 통일하는 것이 좋을지 아니면 의도적으로 넣을 곳만 넣는 것이 좋을지가 고민이었다.

결론적으로 tab bar를 없애기로 하였고, 모임 찾기와 마이페이지 버튼을 header로 옮기기로 하였다. tab bar를 없앤 이유는 다음과 같다.
1. 모바일 디폴트로 만들기는 하지만 웹 사용도 적지 않을 것 같다. 탭 바가 있을 시 모바일이 아닌 기기에서의 사용성이 너무 떨어진다.
2. 아이폰의 사파리 환경에서 탭바가 오히려 더 불편하다(사파리 기본 탭 바가 아래쪽에 나타나기 때문에. 이는 고정되어 있지 않아서 우리의 탭바의 위치 또한 계속해서 변한다)
header에 모임 찾기와 마이페이지 버튼을 옮겼고, 롤링페이퍼 보기 페이지에만 뒤로가기 버튼을 추가하였다. 이렇게 정하고 나니 레이아웃을 잡기가 좋아졌고, react-router-dom의 outlet을 사용하여 깔끔하게 정리할 수 있었다.

 

모임 추가하기

나머지 필드들은 기존에 구현해 놓았던 input이나 textArea 컴포넌트를 사용하면 됬지만 이모지나 색상을 선택하는 부분을 어떻게 보여주면 좋을지 고민했다. UI 상으로 정해진 값만을 선택할 수 있도록 하는 것이 좋다고 생각했고 따라서 라디오 버튼으로 이를 구현하였다. 두 라디오 버튼의 경우 로직이 동일하기때문에 동일한 컴포넌트로 구현하였다.

마지막 스프린트에 추가된 비공개 모임이다. 체크박스와 스위치 중 어떤 UI가 좋을지 고민했다. 시각적으로 스위치가 더 적절하다고 판단되어 스위치로 구현했다. 디자인이나 안내문구는 슬랙의 채널 생성을 따라했다.

 

메인 페이지

직관적이면서도 많은 내용을 담을 수 있도록 UI를 만들었다. 모임명과 모임설명의 폰트사이즈와 weight를 다르게 하여 시각적으로 분리될 수 있게 하였고 이모지를 추가하여 귀여움 요소를 얹어보았다ㅎ

 

롤링페이퍼 페이지

초기에는 익명, 비밀글 기능이 존재하지 않아 모바일에서 두 줄로, 더 큰 디바이스에서는 3줄로 보이도록 하였다. 이렇게 하니 모바일에서 가독성이 떨어진다는 의견이 많았다. 또 익명, 비밀글 기능을 추가되면서 체크박스를 더하기에는 사이즈가 너무 작았다. 메시지가 더 잘보이도록 키우기로 변경하였고 색상 선택 라디오도 상단으로 이동하게 했다. 디자인적으로 피그마를 많이 참고하였다(아니 사실상 똑같다ㅎ)

 

비밀글, 비밀글&익명글, 익명글 UI다. 비밀글은 회색으로 처리하여 확실하게 구분가도록 하였다. 닉네임을 유저가 자유롭게 설정할 수 있기 때문에 '익명'으로 표시하는 것이 더 혼란스러울 수 있다는 판단하에 칸을 비워두어 나타냈다.

 

마이페이지

받은 롤링페이퍼와 작성한 메시지를 확인할 수 있게 해야했다. 사용자가 한 눈에 두 정보가 다 있구나를 알 수 있게 하고 싶었고 따로 페이지 이동을 하고 싶지 않았다. 탭이 적절하다고 결론 내렸고 선택된 탭은 색상과 진하기로 알아볼 수 있게 했다. 받은 개수가 중요하다고 생각되어 이를 숫자로 크게 보여지도록 했다.

프로젝트에서 유일하게 페이징이 사용되었다. 다양한 예시를 찾아보다 선택된 숫자가 가운데에 오도록 하는 것이 좋을 것 같아 다음과 같이 구현했다.

 

Logo, Empty State

 

사실 로고 만드는게 제일 어려웠다. 내 마음을 편지로에서 착안하여 만들었다. 다른 툴을 사용할 줄 몰라 피그마로 만들다보니 조금 투박하다. 파비콘으로 사용되는 로고의 경우 오늘의집 로고에서 영감을 얻었다.

 

여기저기 empty state를 표시할 곳이 있어 추가했다. 초기 가입시 메인페이지, 마이페이지, 검색결과 없음에서 사용했다. 생각보다 귀여워서 적어놓는다. (슬픈 표정이 너무 슬프다는 피드백을 받아 놀란 표정을 추가하였다. 근데 다들 킹받는다고 한다. 나의 소확행이다)


앞으로 추가되거나 변경 될 UI가 더 있을 것 같다. 이는 차후에 이 글에 더 추가해야겠다.

+) 생각보다 UI가 많이 변경되어 따로 글을 적었다. 변경된 UI는 회고글에 남겨두었다. https://prefer2.tistory.com/entry/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-6-%ED%9A%8C%EA%B3%A0

 

 

🎨 figma link

💌 내편 서비스 사용해보기