본문 바로가기
내일배움캠프

[내일배움캠프] Day11 - 디자인카타 (장바구니가 비었을 때 어게 보여주는 것이 좋을까요?)

by 이응이응시옷 2025. 2. 6.
728x90

 


 

[주제]

 


[선택과 이유]

 

나의 선택은 A이다.

 

사실 둘다 조금 아쉬운 디자인인 것 같은데 굳이 고르자면 A.

시선은 확실히 B로 먼저 가긴 하는데 쇼핑앱 장바구니 빈화면에서는 사용자가 자연스럽게 쇼핑을 이어가도록 유도하는 역할을 해야 하기 때문에 CTA 버튼이 있는 A를 골랐다.

 

이왕이면 쇼핑 앱 장바구니 빈화면은 사용자가 다음 행동을 쉽게 할 수 있도록 명확한 가이드 제공하고, 친근한 디자인과 감성적인 메시지 추가하고, CTA 버튼을 통해 즉시 쇼핑 가능하도록 유도하고, 추천 상품을 통해 자연스럽게 쇼핑을 계속하도록 만드는 디자인을하면 좋을 것 같다.

 


쇼핑 앱의 장바구니(empty cart) 빈 화면은 사용자가 처음 앱을 사용할 때나 장바구니를 비우고 난 후 보게 되는 중요한 페이지입니다. 잘 설계된 장바구니 빈 화면은 사용자가 자연스럽게 쇼핑을 이어가도록 유도하는 역할을 해야 합니다.

🛒 장바구니 빈 화면 디자인 시 고려할 요소

1. 명확한 메시지 제공

  • 사용자가 현재 어떤 상태인지 이해할 수 있도록 간결하고 친절한 메시지를 제공하세요.
  • 예: "장바구니가 비었습니다.", "아직 담긴 상품이 없어요!", "마음에 드는 상품을 담아보세요!"

2. 적절한 시각적 요소 추가

  • 심플한 일러스트나 아이콘을 추가하여 시각적으로 친근하게 만듭니다.
  • 예: 장바구니 아이콘, 귀여운 캐릭터, 텅 빈 장바구니 이미지

3. CTA(Call To Action) 버튼 제공

  • 사용자가 쇼핑을 바로 시작할 수 있도록 유도하는 버튼을 배치합니다.
  • 예: "지금 쇼핑하기", "추천 상품 보러 가기", "베스트셀러 보기"
  • 버튼을 명확하게 강조하여 쉽게 클릭할 수 있도록 디자인하세요.

4. 개인화 추천 상품 표시

  • 사용자가 관심을 가질 만한 상품을 추천하여 구매를 유도하세요.
  • 예: 최근 본 상품, 인기 상품, 할인 상품

5. 앱의 브랜드 스타일 반영

  • 브랜드의 톤을 유지하는 디자인과 문구를 사용하세요.

예: 고급 브랜드 → "당신만을 위한 특별한 상품을 찾아보세요!", 유쾌한 브랜드 → "텅 빈 장바구니가 외로워하고 있어요! 채워볼까요?"

 

🎨 예제 디자인 아이디어

 심플한 스타일
🛒 장바구니 아이콘 + "장바구니가 비었습니다." + "쇼핑하러 가기" 버튼

 감성적인 스타일
🥺 귀여운 캐릭터가 빈 장바구니를 들고 있음 + "아직 담긴 상품이 없어요!" + "추천 상품 보기" 버튼

 추천 상품 제공형
🎁 "이런 상품은 어떠세요?" + 인기 상품 3~4개 미리보기 + "더 보러 가기" 버튼


 

빈 화면(empty state) 디자인은 UX/UI 디자이너에게 중요한 요소 중 하나입니다. 사용자가 앱이나 웹사이트에서 데이터를 아직 입력하지 않았거나, 네트워크 오류가 발생했거나, 검색 결과가 없을 때 등 빈 화면을 접할 수 있는데, 이를 효과적으로 디자인하면 사용자 경험을 크게 개선할 수 있습니다.

✅ 빈 화면 디자인 시 고려할 요소

  1. 명확한 메시지 전달
    • 사용자가 왜 이 화면을 보고 있는지 설명해 주세요.
    • 예: "아직 저장된 항목이 없습니다." / "검색 결과가 없습니다."
  2. 행동 유도(CTA, Call To Action) 추가
    • 빈 화면에서 무엇을 해야 하는지 안내해야 합니다.
    • 예: "새로운 항목을 추가하세요!" 버튼 제공
    • 예: "다른 검색어를 입력해 보세요."
  3. 시각적인 친절함
    • 적절한 일러스트나 아이콘을 추가해 차가운 느낌을 줄이고 친근함을 제공하세요.
    • 너무 많은 정보를 넣지 말고, 심플하게 디자인하는 것이 좋습니다.
  4. 브랜드 톤 & 감성 유지
    • 브랜드의 개성이 드러나는 문구나 디자인 스타일을 반영하세요.
    • 예: 캐주얼한 브랜드라면 "이곳이 너무 썰렁하네요! 새로운 항목을 추가해 볼까요?" 같은 문구 사용.
  5. 애니메이션 & 인터랙션 활용
    • 부드러운 페이드 인 효과나, 간단한 모션이 있다면 더욱 자연스럽습니다.
    • 예: 버튼이 살짝 흔들리는 애니메이션 추가.
  6. 예측 가능성 & 유용성
    • 사용자가 앞으로 어떤 데이터를 채울 수 있는지 힌트를 주세요.
    • 예: "최근 본 항목이 여기에 표시됩니다."

🎨 예제

  1. 노트 앱 빈 화면
    • 🎨 "새로운 노트를 추가해보세요!"
    • 📄 작은 노트 아이콘 + "새 노트 작성" 버튼
  2. 쇼핑 앱 검색 결과 없음
    • 🛒 "검색 결과가 없습니다. 다른 키워드를 입력해 보세요."
    • 🔍 돋보기 아이콘 + 추천 키워드 버튼 제공
  3. 소셜 미디어 초기 상태
    • 👫 "친구를 추가하면 피드가 채워집니다!"
    • ➕ "추천 친구 보기" 버튼

빈 화면도 결국 UX의 중요한 부분입니다. 단순히 "비어 있음"을 보여주는 것이 아니라, 사용자가 자연스럽게 다음 행동을 취할 수 있도록 유도하는 것이 핵심입니다! 😊


 

오늘은 과제를 다 하고 제출했다

사실 내가 만족스럽게 다 했다고 말 할 수는 없다

완성도가 확 떨어지기 때문이다

 

그래도! 심화 과제를 시도해본 것 만으로도 만족하고, 과제를 제 시간에 제출을 하긴 했다는 점이 만족스럽다

프로토타입을 만들면서 내맘대로 안될 때 자존감이 확확 떨어지는게 느껴졌는데 그래도 이만큼 한 것에 만족하기로 했다

다음에는 더 잘 할 수 있겠지

 

튜터님 말대로 연휴같은거 다 빼면 이제 10일차인데 당연히 못할 수 있지

이제 더 잘하면 된다

화이팅!

728x90