여기서만나 UI 개발기

 

프로젝트를 하면서 페어인 심바와 가장 많이 했던 말 중 하나는 "역시 UI는 너무 어려워"였다. UI 개발은 정답이 뭔지도 모르겠고, 시간도 많이 소요되었다.

코드 짤 시간이 상당량 줄어드는 게 pain point였지만 그래도 재미있는 작업이었다. 언제 또 이런 경험을 해볼 수 있을까 싶은 마음으로 재밌게 고통받았다.

JS 로직 작성 시간 못지않게 UI 개발에 시간을 들였다보니 간단하게나마 글로 남기고 싶다는 생각이 들었다. 그래서 figma에서 작업한 흔적을 모아 글로 엮어보았다.

 

초기 프로토타입 (개발 전)

발표를 위해 간단하게 제작한 프로토타입이다.

figma가 아닌 PPT에서 도형으로 만들었다. 반나절만에 만들어서 현재 결과물과 차이가 있다.

PPT 작업물 - UI 프로토타입

 

@ 중간지점 검색 기능

참석자추가 폼 UI

직접 입력 버튼이 사라지고 기본으로 직접 입력이 되도록 바뀐 것이 주요한 변화이다. '팔로잉 목록'에서 '간편 추가'라고 버튼 이름이 바뀌기도 했다. 우리 서비스에서 사용하는 '팔로워-팔로잉' 개념은 개발하는 우리도 헷갈려서 문제가 있다고 느꼈고, 친구 추가 메커니즘을 새로 정의하면서 사용하지 않기로 했다. 

피그마 작업물 - 참석자 추가 폼 UI

 

주소 검색 모달 UI

가장 처음 만든 모달 UI이다. UI 자체는 크게 고민이 없었다. 그보다 이미 있는 Input 컴포넌트를 어떻게 활용해서 svg 아이콘으로 된 버튼까지 딸린 Input으로 만들지가 더 고민이었다.

피그마 작업물 - 주소검색 모달 UI

 

지도 핀 UI

우리 프로젝트의 theme 색상 중 여러 색 조합, 크기 조합으로 지도에 띄워보고, 전체적인 밸런스나 가시성이 괜찮은 조합으로 선택했다.

피그마 작업물 - 지도 핀 UI

 

장소 카테고리 Chip UI

여기서만나 UI를 개발하면서 가장 큰 도움이 된 레퍼런스는 단연, 네이버 지도, 카카오 지도 그리고 구글 지도이다. 이 중 장소 카테고리 Chip UI로는 네이버의 장소 카테고리 chip을 아주 많이 참고했다.

개발 초기부터 생각했던 디자인이라 UI 개발 자체에 큰 문제는 없었다. 코드로 UI를 구현하고 나니 미처 생각하지 못한 문제가 생겼다. 사진처럼 참석자 출발지 Pin이 가려지는 현상이 왕왕 발견되었다. Chip의 위치를 옮기기엔 저 위치가 너무도 최적의 위치이다 보니 지도의 boundary를, 지도의 배율에 따라 Chip의 마진 + 높이만큼 수동으로 buffer를 주는 코드를 추가해서 해결했다.

<네이버> 장소 카테고리 Chip

 

<여기서만나> 장소 카테고리 Chip UI

 

경로 표시 UI

참석자를 선택하는 컨트롤러를 어디에 넣을지가 가장 고민되었다. 상단, 하단, 좌측, 우측 다 넣어봤는데 상단이 제일 깔끔하고 흐름도 자연스럽다고 판단돼서 상단에 배치했다. 피그마에서 작업할 때 아바타 일러스트 중 가장 정감이 가는 무스를 예시로 가져다 썼었다.

피그마 작업물 - 경로 표시 UI

 

반응형 UI

모바일에서는 한정된 화면 크기로 인해 '지도'와 '경로 정보'를 한 번에 표시할 수 없었다. 고민 끝에 Drawer 를 추가하는 방식으로 표현하기로 결정했다. 스르륵 올라오는 애니메이션을 넣어주니 꽤 앱스러운(?) 느낌이 나서 만족스러웠다.

반응형 UI

 

로딩바 UI

로딩바 디자인은 페어 심바가 말해준 figma 로딩 UI를 많이 참고했다.

사용자에게 정말 진행되고 있다는 느낌을 주고 싶어서 keyframes를 한땀한땀 작성한 기억이 남는다. 만들 때는 로딩 스피너랑 로딩 바를 계속 보니까 멀미가 나서 고생했다. 그래도 의도한 것처럼 '무언가가 진행되고 있다'라는 느낌이 잘 나온 것 같다.

로딩바 표시 UI

 

 

 

 

@ 로그인 기능

로그인 UI

로그인 페이지는 어떤 소셜 로그인을 선택할지만 고르는 아주 간단한 페이지이다. 카카오, 네이버의 디자인 가이드라인을 지켜서 버튼을 넣어야하는 경험이 새로웠다. 페이지의 내용물이 너무 간단한 나머지 휑해보여서 밋밋하지 않게 일러스트를 그려 넣게 되었다.

로그인 페이지 UI

 

@ 친구관리 기능

친구 카드 UI

친구 카드는 정렬은 처음에 두 칸짜리 grid로 디자인을 정하고 구현까지 마쳤는데, 산만한 느낌이 들어 한 칸짜리 flex로 변경했다.

이렇게 UI 디자인 초안을 잡고 나서 코드를 작성하면서 디자인이 변경되는 경우가 많았다. 페어 심바와 둘이서 만든 디자인이니 수정이 매우 자유로웠다. 한 번에 좋은 디자인을 떠올리기 어렵다 보니 프로젝트 후반부에는 figma에서 어느 정도 작업을 하면, 코드에 녹여보면 더 좋은 배합이 생각날 테니 이 정도로 만족하고 코드 작성 단계로 넘어가기도 했다.

친구 카드 UI

 

친구 검색 UI 

페어 심바가 찾아준 카카오 아이디 검색 UI를 많이 참고했다. 이제 보니 참고한 수준이 아니라 복-붙 수준인 것 같다. ㅎㅎ

친구 검색 UI

 

 

@ 게시판 기능

게시판 UI 

게시판에서는 라벨을 어떻게 처리할지에 시간을 들였다. 디자인 일관성을 유지하려고 게시글 라벨을 filled로 꾸며봤는데, 사용자가 라벨이 아니라 버튼같은 오해할 수도 있고 전체적인 밸런스감이 안좋다고 생각해서 outlined로 정하게 되었다.

피그마 작업물 - 게시글 조회 UI 

 

게시글 조회/작성 UI

게시글 조회나 작성 UI는 게시판에 비해 간단해서 금방 결정되었다. 게시글 조회에서 제목을 포함한 게시글 정보의 레이아웃은 tistory의 UI를 많이 참고했다.

tistory - 게시글 정보

피그마 작업물 - 게시글 조회/작성 UI