본캠프 17일차_디자인 카타, 숙제, WIL

신도리 2025. 2. 14. 12:57

[디자인 카타]

A와 B는 모든 요소가 동일하지만, 시각적 위계에서 차이가 있음.
A는 사진 ⇾ 할인 정보, 가격 ⇾ 인기도(구매 개수) ⇾ 제품 설명 ⇾ 배송 방식,
B는 사진 ⇾ 제품 설명 ⇾ 인기도(구매 개수) ⇾ 할인 정보, 가격 ⇾ 배송 방식의 순서를 따름.

어느 방식이 사용자에게 더 자연스럽고 불편함을 덜 주는지 고민해 봄.
최근에는 제품의 종류가 매우 많고, 대형 유통업체뿐만 아니라 개인도 직접 상품을 판매하는 경우가 많아짐.
그 결과 다양한 이미지 유형이 존재하게 되었으며, 이미지만으로 제품을 명확히 인식하기 어려운 경우가 많음.

따라서 사용자들은 보통 리스트에서 사진을 먼저 살펴보며 관심이 생기면
⇾ 제품명을 확인하고
⇾ 아, 이런 제품이구나! 하고 인식한 후
⇾ 그제야 가격을 확인하는 순서로 사고가 진행됨.
그리고 최종적으로 관심이 가는 제품을 클릭해 상세 페이지로 들어감.

물론 사용자마다 차이는 있겠지만, 일반적으로 제품 사진과 가격이 가장 중요한 요소이며, 그다음으로 제품명이 중요하게 작용한다고 생각함. 이 관점에서 보면, A의 방식은 핵심 정보(사진, 가격)가 연속적으로 배치되면서 정보 간 균형이 깨질 가능성이 있음. 사진보다 먼저 가격이 눈에 들어오게 되면, 사용자는 제품 자체를 인식하기도 전에 단순히 가격만으로 ‘싸다’, ‘비싸다’라는 선입견을 먼저 갖게 될 수 있음. 즉, 사진을 본 후 제품의 가치를 평가하는 것이 아니라, 가격을 먼저 본 후 가격 기준으로 제품을 판단해버리는 상황이 발생할 수 있음.

반면, B의 방식은 제품 사진 아래에 제품명이 배치됨으로써 자연스럽게 한 번 더 시선을 머무르게 하며, 그 후 인기도(구매 개수)가 들어가면서 가격 확인 전 한 번 더 시각적 여유를 제공함. 이렇게 되면 사용자는 제품의 정체성을 먼저 파악한 후 가격을 확인하게 되고, A보다 보다 자연스러운 구매 흐름이 형성됨.

따라서 사용자가 보다 직관적으로 제품을 인식하고, 불필요한 가격 중심의 판단을 줄일 수 있다는 점에서 B의 방식이 더 효과적일 가능성이 높음.

위기·성장의 순간, 고객을 잡는 카테고리 디자인. Airbnb, 배달의민족, 쿠팡, 아몬즈 사례 분석 |

카테고리는 유용한 탐색 도구입니다. 그런데 카테고리가 제품의 위기를 극복하고 성장 기회를 만든다고 한다면 어떤가요? 제품 사례 분석을 통해 알아보겠습니다.

dewberry9.github.io

자료 요약

1. 카테고리 디자인의 중요성

고객 경험을 향상시키고, 비즈니스 성과(전환율, 노출 수 등)에 직접적인 영향을 미침.

잘 설계된 카테고리는 사용자가 원하는 상품/정보를 빠르게 찾을 수 있도록 도와줌.

2. 카테고리 구조의 유형

수평적 카테고리: 단순하고 직관적이지만, 선택지가 많아지면 혼란을 초래할 수 있음.

수직적 카테고리: 계층 구조로 정보 정리가 가능하지만, 깊어질수록 복잡성이 증가함.

3. 카테고리 디자인 사례 분석

아몬즈: 카테고리와 필터 기능을 개선해 상품 노출 횟수 22% 증가 및 구매 전환율 향상.

쿠팡 로켓프레시: 홈 화면을 재구성해 카테고리 접근성을 높이고 탐색 경험 개선.

4. 결론

카테고리 디자인 최적화는 단순한 UI 개선이 아니라, 사용자의 탐색 패턴을 반영한 전략적 접근이 필요함.

탐색 효율성을 높이면 사용자 만족도가 증가하고, 자연스럽게 매출과 전환율도 상승함.

레퍼런스 탐색

유명 쇼핑앱들의 상품 리스트를 살펴봤을 때, 10개의 앱 모두 이름 -> 가격 순서였다. B가 눈에 익숙해보였던 것도 시중에서 가장 많이 봐온 형태였기 때문이었던걸까? 기업들은 왜 이런 UI를 적용했을까?

상품 리스트 분석 아티클: https://maily.so/tipster/posts/xw6ov859rk5

📚 우리 서비스에 맞는 리스트 UI는?

신선배송, 커머스, SNS 등 9개 서비스 리스트 UI 분석

maily.so

자료 요약

헬로네이처, 오늘회, SSG 새벽배송 : 기본 리스트 UI 비교 정리

1. 헬로네이처

정방형 이미지를 기본으로 사용해 일관성을 유지
인기 상품은 크기를 키워 강조하고, 제철 식재료는 하나로 묶어 구성
리스트 구성을 다채롭게 만들어 사용자 피로도를 줄이고 시각적 흥미를 유도

2. 오늘회

리스트 중간에 사용자 작성 리뷰(사진 포함)를 삽입하여 신뢰도와 구매 전환율을 높임
리스트를 단순 상품 나열이 아닌 구매 후 경험까지 반영한 콘텐츠로 구성

3. SSG 새벽배송

리스트 상단에 ‘인기과자 할인’, ‘따끈따끈한 신상품’ 등 문구와 대표 이미지를 활용해 강조
기획전 및 특가 상품을 효과적으로 노출하여 사용자의 관심을 끌고 구매 유도

참고하기 좋았던 아티클: https://brunch.co.kr/@wlgp2096/7

6개의 이커머스 어플 상품 리스트 비교/분석하기

비슷해보이는 상품리스트가 이렇게 달랐다니...?! | 들어가면서... 오늘의 주저리, 이번에는 따라 하기를 시작하기 전, 이커머스 앱에 대해 간단한 분석을 해보기로 하였다. 부끄러운 과거 하나를

brunch.co.kr

[숙제]

🐧🐥HW. 네이버 지도 앱 클론 디자인

어려웠던 점: 4의 배수나 8의 배수가 아니어서 뭔가 이상했다. 글꼴이 프리텐다드나 맑은 고딕, suit가 아니어서 당황했다. 똑같은 글꼴을 찾을 수 없어서 프리텐다드로 진행했다.

클론 디자인 pdf 파일

네이버 지도 클론 디자인.pdf

2.13MB

🔹 WIL(Weekly I Learned)

-일주일을 돌아보기

🐹 FACTS (사실, 객관):

이번 주는 디자인 숙련 주차였다. 피그마 심화 강의를 완강했다. 심화 강의에 과제들이 4개 정도 있었는데, 카타가 끝나고, 디자인 아티클을 몇 개 읽은 뒤, 강의를 듣고 과제를 진행했다. 과제를 진행하면서 헷갈리는 것도 많아서 폰에 앱들을 깔고 자주 들여다봤다.

🐧 FEELINGS (느낌, 주관):

밤 11시까지 헬스를 하고, 토익을 2시까지 한 뒤 1시간 정도 자유 시간을 가졌다. 그래서 다음 날 너무 피곤했고, 금요일이 되니까 피곤이 쌓였는지 몸 컨디션이 안 좋았다. 이번 주는 조금 불안정했다. 디자인 카타 때도 집중이 안 되고, 하루에 날리는 시간이 꽤 길게 느껴졌다. 디자인 카타를 마친 뒤 튜터님들이 의견을 달아주시는데, 내 글에만 의견이 달려있지 않을 때, 작년 학교에서 UI/UX 프로젝트를 진행하며 아이디어를 던지는 족족 팀원들의 동의를 받지 못했을 때가 기억나면서 '난 역시 UI/UX가 안 맞나? 내가 잘못됐나?' 하는 생각이 또 다시 들었다. 아침부터 이런 마음가짐을 먹으니까 오후 시간도 집중하지 못하고, 과제 진행이 느렸다. 진행이 느리니 다른 계획한 할 일들을 미루게 되고, 미루니까 마음도 좋지 않았다. 아무튼 여태까지 약 1달 반 동안 캠프를 진행하면서 가장 별로였던 한 주.

🐭 FINDINGS (배운 것):

- 생각이 많으면 불안도 많아진다.

더 나은 다음 주를 만들기 위해

🐸 FUTURE (미래):

다음 주는 개인 사정으로 인해 1주 정도 결석을 하게 되었다. 26일 부터는 건강도 마음도 건강하게 활동하고 싶다. 캠프에서 준 피그마 예제 파일은 꼭 다 완료하고 싶다. 그리고 내용이 부족해서 매일 TIL을 작성하지 못했는데, 이제는 꼭 매일 배웠던 점, 반성할 점 등을 정리한 TIL을 매일 작성하고 싶다. 어떻게 하면 괜찮은 TIL을 작성할 수 있을까? 내 것은 단물 빠진 껌 같이 별로 도움이 되지 않아 보인다. 2학기 때 꼭 인턴쉽에 합격해서 실무 경험을 쌓고 싶은데, 계속 이렇게 살면 안 될 것 같다. 달라져야 한다.