나의 UI 발전 일기
그런데 이제 프론트앤드 개발자가 그리는
사이드 프로젝트 화면 디자인을 하고 있던 중 갑자기 나의 디자인이 실증나고 촌스러워 보이는 순간이 있었다. 사용자를 위한 사용자의 pain point, 흥미를 이끌어 내는 디자인이 아니라 단순 DB의 정보를 나열한다는 생각이 들었다. 글자 그림 모두 눈에 띄지 않고 칙칙하다고 느껴진달까? 강조 되어야 하는 부분이 충분히 강조 되지 않고 있다는 느낌을 받았다.
사용자의 입장에서 화면에 들어와서 아래로 스크롤을 내려 더 읽어 볼 이유가 없다는 생각까지 들었다.
긴급히 PM을 호출하여 대량의 레퍼런스들을 찾아와 아티클 유형의 상세페이지와 커머스 유형의 상세페이지들을 정리하기 시작하였다.
아티클의 성격이 강한 현재 우리의 상세페이지에 적용하기 위해 아티클을 가져왔고, 커머스를 가져 온 이유는 어떤 도메인 보다 유저를 이끌기 위해 가장 힘을 많이 쏟는 분야이지 않을까 싶어 가져와 보았다.
유심히 분석 해 본 요소들은 아래와 같다.
1. 제목 영역을 어떻게 보여주고 있나.
2. 이미지의 크기는 어떨까? 복수의 이미지의 경우 어떤 레이아웃을 보여주나
3. 글자는 가운데 정렬일까? 좌측정렬일까?
4. 여백의 크기를 어떻게 가져가나?
[오늘의 집 커뮤니티]
https://ohou.se/projects/144446/detail?affect_type=ProjectSelfIndex&affect_id=20
1. 제목과 썸네일 이미지 영역이 80% 이상을 차지한다.
2. 스크롤을 내리지 않으면 어떤 내용의 컨텐츠가 있는지 모르겠다.
3. 넓은 화면의 경우 가운데 1000px 정도의 영역에만 컨텐츠가 보이게 레이아웃이 구성되어있다.
[퍼블리]
https://publy.co/content/7343?s=pvhtvq
1. 아티클의 썸네일 일러스트와 제목이 최상단에 위치하여 있다.
2. 아티클 목록에서의 모양과 유사한 UI가 그대로 있다.
3. 노션을 보는 것 같다.
[요즘 it]
https://yozm.wishket.com/magazine/detail/1372/
1. 제목이 bold 처리 되어있지 않은게 신선했다.
2. 아티클의 글자와 이미지 이외의 다른 복잡한 ui가 없어 깔끔하다.
3. 제목과 글들이 좌측정렬이 되어있다.
[네이버 블로그]
https://blog.naver.com/sjej0524/223215401113
1. 제목 영역이 상단의 30%정도 차지한다.
2. 글자 정렬은 유저가 정할 수 있어 참고할 만한 사항이 많지는 않았다.
[29cm]
https://content.29cm.co.kr/showcase/487
1. 이미지와 시각적 반응이 중요한 만큼 제목 영역이 매-우 크다.
나의 디자인도 사실 많은 시행착오를 거쳐 나온 것이긴 하지만, 사용자의 시선을 사로잡을 수는 없다고 생각했다.
순서대로 초안-현재안-개선안개선안에 수정이 된 요소들과 설명은 아래와 같다.
제목의 폰트 크기를 키운다.
대부분의 아티클들은 제목을 과하게라도 크게 만들어 눈에 띄게 만드는것을 레퍼런스등을 통해 알았다.
그에 반해 기존의 디자인은 제목이 화면에 뭍혀 있어 어떤 내용을 말하는지 알기가 어려웠다.
과감하게 폰트를 36px -> 56px 로 키웠고, 상하 padding 값을 80px 로 늘렸다.
태그와 칩같은 요소들은 제목 아래에 붙인다.
아티클의 전체적인 카테고리를 유추할 수 있도록 제목 바로 아래에 두어 어떤 내용에 대해 쓰여있을지 암시해 주는 역할인데, 제목과 멀리 떨어져 있어 어떤 카테고리의 아티클인지 인지가 어렵다. 그래서 제목 아래에 대분류와 효과를 위치하게 하였다.
화면의 반을 버리더라도 레이아웃은 무조건 가운데에!
버리는 공간이 많더라도 독자의 눈길을 끌어야 하기에 잘 보이는 가운데로 배치를 바꾸었다.
가운데 영역 안에서는 좌측에 정렬되어 있긴했지만, 대부분 가운데 영역을 좁게 줄여 정해진 영역 안에서의 빈 공간은 없는 UI를 가져간다. 그래서 적용했다.
가로폭은 1080px 로 고정하고 모든 컨텐츠를 몰아두었다.
불필요한 설명 중복 삭제
영상이 영역에 있으면 영상이라는게 너무나 명확해서 굳이 소제목이 있을 필요가 없어 보였다.
가운데 컨텐츠 영역이 줄어들고 정해진 만큼 컨텐츠 영역에 꽉 채워 보여주는것이 좋을 것 같아 가로 너비를 늘였다.
