[7월 1주차] UI 클론 디자인 - 커피챗

커피챗

최근에, 독일에서 바로 취업하신 주니어 프로덕트 디자이너 분과 20분 간 통화를 한 경험이 있다.

관심있는 직군에 종사하시는 분과 이야기를 나눠볼 수 있는 <커피챗>이라는 서비스를 통해서!

UI에 사용된 컬러도 다양하고, 서비스 자체도 흥미로워서 2번째 클론 디자인 주제로 선정하게 되었다.

 

커리어 대화 연결 플랫폼 커피챗 -> https://coffeechat.kr/

새로운 커리어 경험의 연결

 

---

 

디자인 작업물

 

좌 : Original

우 : Clone

 

 

프로토타입 제작 연습차 간단하게 구현해본 스크롤

 

 

---

 

배운 점 기록

 

1) 대강 가늠해보았을 때 메인 콘텐츠의 좌우여백은 70px이고, 콘텐츠 간의 구분을 위한 문단 여백은 140px이다.

기본으로 사용하는 여백의 2배 정도의 여백을 사용하면 내용 간의 성격을 구분할 수 있다.

여백의 절대적인 크기 자체는 서비스마다 다르겠지만, 여백에도 위계가 필요하다는 것을 실감했다.

 

게슈탈트 이론의 '근접성의 법칙'을 디자인에서 활용하기 위해, 어느 정도로 가까이 둬야 서로 공동의 의미를 지니는 것처럼 보이는지 아는 것도 중요하지만 어느 정도로 떨어뜨려 놓아야 서로의 의미가 구분되는지 아는 것도 중요하다.

 

 

2) 파트너 정보를 담는 콘텐츠 카드의 R값은 25에 근접한다.

저 정도의 둥근 모서리가 필요한 경우가 생기면 오늘 유추한 R값을 활용해보아야겠다.

 

 

3) 스크롤시 고정이 필요한 요소를 프로토타입에서 바로 확인하기 위해 Constraints > Fix position when scrolling을 활용했다.

해당 기능을 쓰는 플로우는 피그마에서 직관적으로 잘 만들어두었기 때문에 어려움이 없었다.

그런데 스크롤해야 하는 모든 콘텐츠 요소를 하나의 프레임에 넣고, 콘텐츠 요소보다 프레임의 크기를 작게 줄여야 스크롤이 된다는 걸 자꾸 잊었다.

잊지 않기 위해 기록!

 

 

4) 보다시피 UI에서 그라데이션 컬러가 많이 사용되고, 다른 앱에 비해서도 다채로운 느낌이 강하다.

나는 그라데이션을 사용해본 경험이 별로 없는데 이번 클론 디자인을 하면서 연습을 좀 해보았다.

얼추 비슷하게 맞춰보기는 했는데 컬러에 대해 더 많이 배워야겠다는 생각을 하는 계기가 되었다.

방향 이리저리 바꾸면서 그라데이션의 변화를 살펴보는 것도 재미있었다.

 

 

5) Image > Lighten 기능을 활용해서 투명한 Status Bar 이미지 얻기!

사실 클론 디자인 시작하면서 맞닦뜨린 첫번째 위기는 "Status Bar"였다.

시간, 배터리, 인터넷 연결 상태 등을 나타내는 Status Bar는 디자인의 영역은 아니다.

하지만 최대한 Original 과 비슷하게 Clone 화면을 만드는 게 개인적인 목표였기 때문에 Status Bar을 그려야 했는데 일일이 그리자니 비효율적이고 인터넷에서 개별 요소들을 찾아서 붙이자니 시간이 오래 걸렸다.

 

그래서 구글링해서 알아낸 방법이 Image > Lighten 을 통해, 이미지의 밝은 부분만 남기는 것이었다.

Original 화면에서 Status Bar가 화이트이다보니, 이 방법을 통해 배경을 날리고 Status Bar의 내용만 남길 수 있었다.

Status Bar가 블랙이라면 Image > Darken을 쓰면 될 일 ! 

아마도 이것보다 더 나은 방법이 있으리라 생각되지만, 지금은 배워나가는 거니까 그 때 그 때의 문제를 해결할 수 있는 방법들을 하나씩 익히면 충분하지 않나 싶다.