UI design

Clip Content

프레임이나 그룹 내의 콘텐츠가 지정된 경계를 벗어나지 않도록 제한하는 피그마 옵션

이 기능을 Card 컴포넌트를 만들면서 사용해야 하는 상황이 있었다.

카드의 전체 프레임에 radius가 적용했었는데, 이미지 때문에 튀어나와 radius도 깨지는 문제가 있었다.

이렇게 radius만 추가하면 border가 제대로 적용되지 않았다.

이 때, 컨테이너에 clip content를 적용해주면 두 문제 모두 해결되는 것을 알 수 있다.

UX

ux란?

user experience의 약자로, 서비스나 제품을 사용할 때 유저의 모든 행동을 지칭한다.

대표적인 나쁜 ux의 예시이다.

꽃이나 나무에 물을 주려고 만든 물뿌리개지만, 물을 주기 매우 힘들게 되어있기 때문에 이 제품을 사용하는 소비자들은 매우 불편함을 느낄 것이다.

이처럼 서비스나 제품에 ux를 고려함으로써 유저에게 더 사용성이 좋게 만들어 줄 수 있다.

User

서비스를 사용할 때 유저는 크게 3가지 관점에서 분류될 수 있다.

1. 사용자(보편적 특성 - 불편함, 편함, 복잡함 등등)
2. 사회인(유행, 사회 경제적 상황, 기술 트렌드, 세대적 성향에 영향)
3. 사람(서비스의 니즈와 고충이 서로 다름)

ux 전략은 각 사용자 층에 따라서도 달라진다.

• 사용자 - 설문조사
• 사회인 - 세대별 특징 및 트렌드 조사
• 사람 - 심리학(게슈탈트 이론, 휴리스틱 등등)

예시 한가지를 들면 쿠팡의 '원클릭' 구매가 있다.

쇼핑몰의 경우 구매 경험까지 배송지 입력, 구매 정보 입력, 결제 정보 등등 많은 과정이 있는 문제점이 있다.

하지만, 쿠팡의 경우 원클릭 구매를 통해 더 편하게 주문이 가능하다.

경험 요소

사용자가 서비스에서 경험하는 것들

크게 what(서비스가 제공하는 것)과 how(서비스가 제공하는 방식)로 나눈다.

example - 넷플릭스

• What (서비스가 제공하는 것)
  • 기능: 영상 스트리밍, 다운로드, 이어보기, 프로필 관리
  • 정보: 콘텐츠 소개, 시청 등급, 장르, 출연진 정보
  • 외형: 넷플릭스의 상징적인 빨간색, 깔끔한 다크 모드 인터페이스
  • UI: 카테고리별 콘텐츠 행열 배치, 자동 미리보기 재생
  • 디자인: 직관적인 아이콘, 포스터 중심의 시각적 탐색 환경
• How (서비스를 제공하는 방식)
  • 이용절차: 간단한 회원가입, 직관적인 결제 프로세스
  • 배열: 개인화된 콘텐츠 추천, 시청 기록 기반 배치
  • 안내: 새로운 기능 튜토리얼, 콘텐츠 관련 알림
  • 인증: 간편한 로그인, 프로필별 시청 기록 관리
  • 에러처리: 네트워크 오류시 자동 화질 조정, 오프라인 시청 지원
  • 커뮤니케이션: 이메일 알림, 앱 내 신작 소개

ux/ui를 디자인할 땐 어떤 경험 요소가 있어야하는지 먼저 생각 후 문제 및 해결을 고민하면 그 서비스의 핵심 가치가 무엇인지 파악하고 사용자가 사용하고 싶은 서비스를 만들 수 있을 것이다.