당근마켓을 통해 알아보는 UI 원리🥕

디자인 및 색상 사용 : 통일감 있는 UI

👌 심미적 사용성 효과, 게슈탈트 유사성의 원리

• 라운드 통일 ( 카드, 버튼 등 )
• 라운드 → 부드럽고 깔끔한 분위기
• 검정 / 화이트 기반의 심플한 디자인, 브랜드의 이름🥕 떠올리는 주황/초록의 포인트 컬러 사용

✨

• 심미적 사용성 효과
  : 시각적으로 깔끔하고 조화로운 디자인→ 사용자의 만족도를 높이고 신뢰도 향상 시킴
• 게슈탈트 유사성의 원리
  : 유사한 형태와 색상의 요소를 배치해서 시각적 그룹화 유도함

---

레이아웃 및 내비게이션 구조

👌 제이콥의 법칙, 히크의 법칙, 게슈탈트 원리

• 기본 구조: 상단바 - 바디 - 하단 네비게이션 바
• 하단 네비게이션바 아이콘에 익숙한 디자인을 사용 → 쉽게 이해 가능
• 햄버거 메뉴에 부가 기능을 숨겨 메인 화면의 복잡성을 최소화
• 특정 항목(3개_[동네거래])만 메인에 표시 🥰
  

✨

• 제이콥의 법칙
  : 사용자는 다른 앱에서 경험한 인터페이스와 유사한 디자인을 선호
• 히크의 법칙
  :메인 화면에서는 ‘동네거래’ 관련 핵심 기능만 노출하여 선택지를 최소화
  -> 사용자의 의사결정 부담 감소 🤭
• 게슈탈트 원리
  : 상단바와 본문, 네비게이션 바 사이의 여백을 활용해 기능별 구분을 명확히 함

---

카드형 레이아웃 및 정보 구성

👌 폰 레스토프 효과, 게슈탈트 원리

• 정보구성 : 가격(+예약/완료) → 제품명 → 장소 및 업로드 시간 → 채팅 & 찜 개수 순서로 강조
  • 색상 차별, 글씨 굵기를 활용해 정보의 위계를 나타냄
• 카드형 디자인 → 직관적 정보 전달

✨

• 폰 레스토프 효과
  : 주황색으로 강조 (가격 정보, 주요 버튼 등)
• 게슈탈트 원리
  : 중요한 정보(가격, 상태)를 더 강조 ❗

---

로딩 및 시스템 반응성

👌도허티 임계값

• 로딩 중 애니메이션과 스켈레톤 스크린 표시

✨

• 도허티 임계값
  : 시스템 반응 시간이 400ms 이하일 경우 사용자가 더 유쾌하게 느끼도록 애니메이션과 시각적 피드백 제공

---

글쓰기 (상품 등록)

👌 폰 레스토프 효과, 피츠의 법칙

• [글쓰기] 버튼을 주황색으로 강조
• [메인] - [글쓰기] 창에서 바로 [동네 거래] 네 가지 카테고리 선택 가능 : 사용자 니즈 파악
• 글쓰기 버튼, 작성 완료 버튼은 하단에 배치하여 쉽게 터치할 수 있게 함

✨

• 폰 레스토프 효과
  : 주황색으로 강조 (글쓰기)
• 피츠의 법칙
  : 버튼을 사용자의 손이 쉽게 닿는 위치에 배치 : 접근성과 사용성 향상

---

🐹 이건 어떨까 ?

• 하단 네비게이션 바 텍스트 지우기

  : 아이콘 만으로 기능을 충분히 인지할 수 있을 것 같아 텍스트를 지우고 깔끔하게 정리해보는 건 어떨까 ~
  

• 대체로 탭 전환 대신 페이지 전환을 사용한 부분 → 탭 전환 사용 비율 높이기
  : 로딩시간이 길어지는 문제가 생김
  → 일부는 탭으로 정리해도 좋을 듯하다