[7월 4주차] UI 클론 디자인 - 오늘의집 마이페이지

오늘의집

이사를 계획하던 무렵 카카오톡보다 자주 들어갔던 앱 오늘의집 !

특히 다른 사람들이 멋지게 꾸민 집을 공개하는 '집들이' 탭을 가장 좋아한다

각기 다른 사람들의 취향을 보는 것도, 탁월한 공간 활용 사례를 보면서 내 방에 대한 청사진을 그려나가는 것도 재미있다

그래서 이번에는 오늘의집을 선택하게 되었다

 

여담...'집들이'를 제일 좋아한다면서 막상 클론은 '마이페이지'로 한 이유

코로나에 걸려서 컨디션이 몹시 엉망인 와중에, 디자인 연습은 해야겠으니 구조가 제일 간단해보이는 걸로 하기로 결정했다 코로나 저리 가 훠이훠이

 

오늘의집 -> https://ohou.se/

인테리어 집꾸미기는 오늘의집

 

---

 

디자인 작업물

 

좌 : Original

우 : Clone

 

---

 

배운 점 기록

 

1) 솔직히 이번 클론에서는, 처음 사용해보는 기능이나, 내가 앞으로 사용법을 까먹을까봐 기록해야 할 필요성이 있는 기능을 별도로 활용하지는 않았다.

이제 대강은, UI 디자인을 할 때 어떤 기능이 반복 활용되는지 감이 오는 것 같다

그래서 다음주부터는 하나의 화면이 아니라, 하나의 요소(필터, 선택 버튼, 바텀 시트 등등)에 대한 디자인 연습을 해보려고 한다

하나의 요소를 만들 때에도 경우에 따라 여러가지 방법이 있는데 그 경우를 상상하며 연습하면 융통성 근육이 좀 자라지 않을까

-> 사이드 프로젝트의 UI 디자인 일정에 다소 변경이 생겨서, 클론이 아닌 창작이 필요한 시점이 생각보다 일찍 도래했다. 그래서 우선 8월 한달간은 클론 디자인이 아닌, Material Design 3 강독(!)을 통해 창작에 필요한 지식을 학습하는 것으로 계획 변경 !

 

 

 

2) Text Box를 만들 때 새로운 방법을 시도해보기는 했다

Udemy 강의 중 강사님이 소개해주신 방법이다

이 방법을 활용해보니, Box와 Text의 여백에 대한 자신감이 생기는 점이 마음에 들어 앞으로는 이 방법을 애용할 생각이다

 

 

As-is :

Text Box 모양에 맞는 오브젝트를 따로 그리고 그 위에 Text를 얹은 다음, 그 둘을 합친다

 

To-be :

Text를 작성하고, Frame Selection으로 프레임화한다

그 다음 배경 색깔(Fill)을 채우고 Auto Layout을 설정해 Text와의 여백을 늘려 Box 공간을 만든다

 

 

3) 연관된 정보는 가까이 둔다

특히 CTA (Call-To-Action) 메시지는, 그 액션을 바로 취할 수 있는 곳에 두어야 한다

 

오늘의집 마이페이지에서는,

친구 초대와 관련된 메시지를 친구 정보 바로 아래에 배치했고

 

공간 사진 업로드 관련 메시지를 공간 사진 업로드하는 곳에 배치했다

 

 

특정 액션에 대한 포인트 적립 보상을 '이벤트'로 분류해 상/하단 배너에 대거 모아놓는 앱도 자주 봤던 터라, 더 흥미로웠던 점이다

 

 

4) "이 탭이 선택되었다"에 대한 시각적 표시

 

프로필, 나의 쇼핑 이렇게 2가지 탭이 있고 그 중 '프로필'이 선택된 상황이다

이 때 선택된 탭을 표시하는 시각적인 방법에는 여러가지가 있는데, 텍스트 색깔에만 변화를 주는 방식은 피해야 한다

색을 구분하기 어려운 사용자의 접근성을 해칠 수 있기 때문이다

 

 

사용자 접근성을 보장하기 위해 위 이미지처럼 버튼 레이블 아래에 밑줄을 표시하거나, 

아이콘 형태의 버튼이라면 Solid를 Outline으로 변화시키는 등의 방법이 필요하다

 

 

관련 내용을 더 참고할 수 있는 곳의 링크도 남겨놓기 

https://www.w3.org/WAI/fundamentals/accessibility-principles/

Accessibility Principles