[주제]

[선택과 이유]

나의 선택은 A이다.
사실 둘다 조금 아쉬운 디자인인 것 같은데 굳이 고르자면 A.
시선은 확실히 B로 먼저 가긴 하는데 쇼핑앱 장바구니 빈화면에서는 사용자가 자연스럽게 쇼핑을 이어가도록 유도하는 역할을 해야 하기 때문에 CTA 버튼이 있는 A를 골랐다.
이왕이면 쇼핑 앱 장바구니 빈화면은 사용자가 다음 행동을 쉽게 할 수 있도록 명확한 가이드 제공하고, 친근한 디자인과 감성적인 메시지 추가하고, CTA 버튼을 통해 즉시 쇼핑 가능하도록 유도하고, 추천 상품을 통해 자연스럽게 쇼핑을 계속하도록 만드는 디자인을하면 좋을 것 같다.
쇼핑 앱의 장바구니(empty cart) 빈 화면은 사용자가 처음 앱을 사용할 때나 장바구니를 비우고 난 후 보게 되는 중요한 페이지입니다. 잘 설계된 장바구니 빈 화면은 사용자가 자연스럽게 쇼핑을 이어가도록 유도하는 역할을 해야 합니다.
🛒 장바구니 빈 화면 디자인 시 고려할 요소
1. 명확한 메시지 제공
- 사용자가 현재 어떤 상태인지 이해할 수 있도록 간결하고 친절한 메시지를 제공하세요.
- 예: "장바구니가 비었습니다.", "아직 담긴 상품이 없어요!", "마음에 드는 상품을 담아보세요!"
2. 적절한 시각적 요소 추가
- 심플한 일러스트나 아이콘을 추가하여 시각적으로 친근하게 만듭니다.
- 예: 장바구니 아이콘, 귀여운 캐릭터, 텅 빈 장바구니 이미지
3. CTA(Call To Action) 버튼 제공
- 사용자가 쇼핑을 바로 시작할 수 있도록 유도하는 버튼을 배치합니다.
- 예: "지금 쇼핑하기", "추천 상품 보러 가기", "베스트셀러 보기"
- 버튼을 명확하게 강조하여 쉽게 클릭할 수 있도록 디자인하세요.
4. 개인화 추천 상품 표시
- 사용자가 관심을 가질 만한 상품을 추천하여 구매를 유도하세요.
- 예: 최근 본 상품, 인기 상품, 할인 상품
5. 앱의 브랜드 스타일 반영
- 브랜드의 톤을 유지하는 디자인과 문구를 사용하세요.
예: 고급 브랜드 → "당신만을 위한 특별한 상품을 찾아보세요!", 유쾌한 브랜드 → "텅 빈 장바구니가 외로워하고 있어요! 채워볼까요?"
🎨 예제 디자인 아이디어
✅ 심플한 스타일
🛒 장바구니 아이콘 + "장바구니가 비었습니다." + "쇼핑하러 가기" 버튼
✅ 감성적인 스타일
🥺 귀여운 캐릭터가 빈 장바구니를 들고 있음 + "아직 담긴 상품이 없어요!" + "추천 상품 보기" 버튼
✅ 추천 상품 제공형
🎁 "이런 상품은 어떠세요?" + 인기 상품 3~4개 미리보기 + "더 보러 가기" 버튼
빈 화면(empty state) 디자인은 UX/UI 디자이너에게 중요한 요소 중 하나입니다. 사용자가 앱이나 웹사이트에서 데이터를 아직 입력하지 않았거나, 네트워크 오류가 발생했거나, 검색 결과가 없을 때 등 빈 화면을 접할 수 있는데, 이를 효과적으로 디자인하면 사용자 경험을 크게 개선할 수 있습니다.
✅ 빈 화면 디자인 시 고려할 요소
- 명확한 메시지 전달
- 사용자가 왜 이 화면을 보고 있는지 설명해 주세요.
- 예: "아직 저장된 항목이 없습니다." / "검색 결과가 없습니다."
- 행동 유도(CTA, Call To Action) 추가
- 빈 화면에서 무엇을 해야 하는지 안내해야 합니다.
- 예: "새로운 항목을 추가하세요!" 버튼 제공
- 예: "다른 검색어를 입력해 보세요."
- 시각적인 친절함
- 적절한 일러스트나 아이콘을 추가해 차가운 느낌을 줄이고 친근함을 제공하세요.
- 너무 많은 정보를 넣지 말고, 심플하게 디자인하는 것이 좋습니다.
- 브랜드 톤 & 감성 유지
- 브랜드의 개성이 드러나는 문구나 디자인 스타일을 반영하세요.
- 예: 캐주얼한 브랜드라면 "이곳이 너무 썰렁하네요! 새로운 항목을 추가해 볼까요?" 같은 문구 사용.
- 애니메이션 & 인터랙션 활용
- 부드러운 페이드 인 효과나, 간단한 모션이 있다면 더욱 자연스럽습니다.
- 예: 버튼이 살짝 흔들리는 애니메이션 추가.
- 예측 가능성 & 유용성
- 사용자가 앞으로 어떤 데이터를 채울 수 있는지 힌트를 주세요.
- 예: "최근 본 항목이 여기에 표시됩니다."
🎨 예제
- 노트 앱 빈 화면
- 🎨 "새로운 노트를 추가해보세요!"
- 📄 작은 노트 아이콘 + "새 노트 작성" 버튼
- 쇼핑 앱 검색 결과 없음
- 🛒 "검색 결과가 없습니다. 다른 키워드를 입력해 보세요."
- 🔍 돋보기 아이콘 + 추천 키워드 버튼 제공
- 소셜 미디어 초기 상태
- 👫 "친구를 추가하면 피드가 채워집니다!"
- ➕ "추천 친구 보기" 버튼
빈 화면도 결국 UX의 중요한 부분입니다. 단순히 "비어 있음"을 보여주는 것이 아니라, 사용자가 자연스럽게 다음 행동을 취할 수 있도록 유도하는 것이 핵심입니다! 😊
오늘은 과제를 다 하고 제출했다
사실 내가 만족스럽게 다 했다고 말 할 수는 없다
완성도가 확 떨어지기 때문이다
그래도! 심화 과제를 시도해본 것 만으로도 만족하고, 과제를 제 시간에 제출을 하긴 했다는 점이 만족스럽다
프로토타입을 만들면서 내맘대로 안될 때 자존감이 확확 떨어지는게 느껴졌는데 그래도 이만큼 한 것에 만족하기로 했다
다음에는 더 잘 할 수 있겠지
튜터님 말대로 연휴같은거 다 빼면 이제 10일차인데 당연히 못할 수 있지
이제 더 잘하면 된다
화이팅!
'내일배움캠프' 카테고리의 다른 글
[내일배움캠프] Day12 - 피그마 활용 심화 1주차 (웹과 앱의 UI 차이) (1) | 2025.02.07 |
---|---|
[내일배움캠프] Day12 - 디자인카타 (스마트 티비 구성 화면, 어떤 것을 선호하시나요 ?) (2) | 2025.02.07 |
[내일배움캠프] Day10 - 디자인카타 (월별 시세 비교 그래프, 어떤 보기 방식을 선택하시겠어요?) (4) | 2025.02.05 |
[내일배움캠프] Day9 - 디자인카타 (메시지 읽음 표시, 어떤 방식을 선호하시나요?) (4) | 2025.02.04 |
[내일배움캠프] Day8 - 디자인카타 (바텀시트 팝업의 닫기 버튼, 어디가 좋을까요?) (2) | 2025.02.03 |