오늘 나는 무엇을 했나요
- 아티클 스터디 - ( 목록에서 상세 정보를 얼마나 보여주는 게 좋을까? )
- 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기
- 마스터 컴포넌트와 인스턴스
- UI 만들기 실습
오늘은 어떤 것을 배웠나요
1. 아티클 스터디 ( 목록에서 상세 정보를 얼마나 보여주는 게 좋을까? )
목록에서 상세 정보를 얼마나 보여주는 게 좋을까?
커머스에서의 상품목록에서 편의를 위해 다양한 정보를 넣는건 사용자의 피로도를 높인다.
하지만 복잡함이 혼란스럽지 않다면 단순함보다 좋을수도 있다.
그 이유는 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재하며,
그 복잡함을 없애고 단순함을 추구하면 나머지 복잡함은 사용자가 감당해야 한다.
즉 복잡함을 잘 다뤄야 사용자에게 가장 좋다.
복잡함을 다루는 방법
1.서비스 특성을 고려(쇼핑 유형별 이커머스 전시영역 기획 전략)
달걀 같은 정확히 사고 싶은 제품이 있을때
그 제품을 검색하고 서서히 한 상품으로 좁혀갈 때의
목록 확인 방식(목적형 쇼핑) 에서 사용자는 검색과 필터, 정렬과 같은 기능을 활용하고 상품을 상세히 확인하고 싶을 때 상세 페이지로 접근합니다.
그러나 옷이나 콘텐츠같은 제품을 사는 사용자들은
반대로 목록을 좀 더 빠르게 스크롤하며 정보를 '훑어보며' 확인합니다. 그 정보를 목록에서 바로 확인할 수 없다면 목록-상세 간의 전환이 아주 빠르게 반복적으로 일어나며, 인지부하를 주게 되므로 이를 주의해야 합니다.
2.사용자 중심으로 정보를 제공하자
사용자는 멤버쉽 쿠폰 할인율이 얼만지 이것이 블랙프라이데이 할인인지 보다는 결국 내가 지불해야 할 가격이 얼마인지가 가장 중요함.
즉 하나의 속성에 단일한 정보를 제공하는것이 좋다 (혼란스러움 제거)
3.체계와 위계를 부여하자
1.사용자에게 필수적인 정보
2.사용자가 인식하는 정보끼리의 유사성
3.우리가 사용자에게 반드시 강조하고 싶은 항목
4.일반적으로 커머스 서비스를 이용하면서 익숙한 체계와 위계
즉 중요한 건 정보의 양의 ‘얼마나’가 아닌
이 정보를 ‘누가, 무엇을, 어떻게' 사용할지를 생각하기
[인사이트]
복잡함 자체는 나쁘지 않지만, 혼란은 부정적인 사용자 경험을 초래합니다.
단순함을 무조건 추구하는 대신, 필요한 정보를 명확하게 전달하여 혼란을 줄여야 합니다
테슬러의 법칙
시스템에는 피할 수 없는 일정 수준의 복잡성이 존재한다고 함.
복잡성을 무조건 제거하는 대신, 사용자에게 적절히 분배하여 인지 부하를 최소화하는 것이 중요함. 단순함을 추구하다 보면 오히려 사용자가 감당해야 할 복잡성이 늘어날 수 있습니다.
이러한 적절한 분배를 하는방법을 경험과 공부를 통해 쌓아야할것같음.
2. 웹/앱 서비스 조사 및 나의 관심 분야 찾아보기
자주 사용하는 웹/앱인 카카오페이지를 살펴보았습니다.
1. 카카오페이지 앱 서비스
카카오페이지는 웹소설과 웹툰을 제공하는 서비스입니다. 주로 앱으로 사용되며 주요 서비스는 다음과 같습니다.
● 웹툰
● 웹소설
2. 카카오페이지 서비스의 주요 목적 및 기능
1) 서비스 목적
카카오페이지 사용자는 모바일 기기를 통해 웹툰과 웹소설을 디지털 콘텐츠로 소비할 수 있으며, 유료 또는 무료 콘텐츠를 골라서 서비스를 이용할 수 있습니다.
2) 대상
10대 후반에서 30대 초반
3) 기능
● 콘텐츠 제공: 웹툰, 웹소설 등 디지털 콘텐츠
● 유료 콘텐츠: 캐시 및 이용권을 통한 콘텐츠 결제
● 구독 및 알림 기능: 원하는 콘텐츠를 구독하고 업데이트 시 알림 받기
● 맞춤형 추천: 취향에 맞는 추천 콘텐츠
3. 유사하거나 동일한 서비스를 운영하는 웹/앱
● 네이버 시리즈
● 레진코믹스
● 리디북스
4. 내가 선택한 서비스를 제공하는 다양한 회사
1) 네이버
● 서비스: 네이버 시리즈, 네이버 웹툰
● 주요 콘텐츠: 웹툰, 웹소설
● 대상: 10대에서 30대까지의 연령대, 전 세계 서비스 이용자(웹툰은 해외 서비스 운영)
● 특징: 글로벌하게 인기가 많음; 다양한 언어로 콘텐츠를 제공하며, 유료 결제 시스템과 광고 수익 모델을 운영
2. 레진코믹스
● 서비스: 레진코믹스
● 주요 콘텐츠: 웹툰, 만화, 웹소설(성인용)
● 대상: 20대~40대 사용자
3. 리디
● 서비스: 리디북스, 리디셀렉트
● 주요 콘텐츠: 전자책, 웹소설, 만화
● 대상: 20대~40대
● 특징: 이 구독 서비스(리디셀렉트)를 통해 월 이용료를 내면 원하는 만큼 콘텐츠를 볼 수 있습니다.
3. 마스터 컴포넌트와 인스턴스
마스터 컴포넌트는 반복적인 디자인을 사용할때 효율적인 기능
마스터 컴포넌트를 만들어놓은다음 인스턴스 컴포넌트를 생성하여 디자인을 한다면
인스턴스 컴포넌트를 수정 할 일이 필요할때 마스터 컴포넌트를 수정하면 한꺼번에 인스턴스 컴포넌트도 수정이 된다
하지만 주의사항으로 인스턴스를 별개로 수정할경우 이는 마스터 컴포넌트보다 우선시되어 마스터 컴포넌트에서 수정해도 인스턴스는 변하지 않는다
아래 예시처럼
수정을 안한 인스턴스는 마스터 컴포넌트의 색인 갈색을 따라가지만
인스턴스 색을 보라색으로 변경한 상태에서 마스터 컴포넌트를 갈색으로 변경해도 인스턴스는 변경하지않는다
4. UI 만들기 실습
UI는 크게 형태가 6가지가 있다.
액션(Action) : 사용자가 중요한 행동을 수행할 때 사용
인풋(Input) : 사용자의 입력을 받을 때 사용
인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
컨테이너(Container) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용
컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용
여기서 중요한 건 UI의 이름이나 분류가 아니라, 이 UI가 어떤 상황에서 어떤 기능을 하는지를 잘 이해하는 것
버튼 컴포넌트
먼저 컴포넌트를 만들기에 제일 중요한건 작은 요소부터 만들어 나가는것
버튼 컴포넌트에 필요한것은
-실습-
1.텍스트를 입력
2.그것을 오토레이아웃으로 설정
3. Fill값과 곡선값 패딩값을 줍니다.
이것은 컨테이너와 라벨로 구성된 간단한 버튼 텍스트 입니다. 8포인트 그리드를 참고하여 좌우 패딩값은 32 상하 패딩값은 16으로 했습니다. 또한 곡선값도 16으로 설정하였습니다.
텍스트필드 컴포넌트
-실습-
1. 텍스트로 플레이스 홀더를 입력합니다.
2. 오토레이아웃으로 바꾸고 Fill값과 라운드 패딩값을 줍니다 ( 8포인트 그리드 )
3. 텍스트는 사용자가 입력하면 없어지므로 눈에 잘 안띄게 색을 변경합니다.
4. 라벨 텍스트를 입력합니다
5. 헬퍼 텍스트 또한 입력후 색을 플레이스 홀더 색과 같이 변경합니다.
6. 모든요소를 드래그해서 오토레이아웃합니다.
7. 플레이홀더 글자의 가로값을 Fill로 바꿉니다.
체크박스 컴포넌트
체크박스는 여러 선택지 중 1개 이상을 선택할 때 사용하는 컨트롤 컴포넌트입니다.
-실습-
1.프레임 24x24 생성
2.프레임 20x20 생성후 24프레임 가운데로 넣기
3.그후 24프레임은 색을 없애기
4.20프레임의 색을 Primary색으로 변경
5.라운드값은 4로 변경
6.체크모양 벡터를 그린후 안쪽으로 넣기
7.모든요소 드래그후 컴포넌트화 하기
라디오 컴포넌트
라디오는 여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트입니다.
-실습-
1.프레임 24x24 생성
2.프레임 20x20 생성후 24프레임 가운데로 넣기
3.프레임 12x12 생성후 20프레임 가운데로 넣기
3.그후 24프레임은 색을 없애기
4.20프레임의 색을 Primary색으로 변경
5.20프레임의 라운드값은 16으로 변경
6.12프레임의 라운드값은 6으로 변경
7.모든요소 드래그후 컴포넌트화 하기
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
아직까지는 디자인툴 공부하는데 어려운 기능을 사용하지는 않아서 할만하지만
갈수록 사용하는 기능이 많아지기때문에 과거에 배운 기능을 완벽하게 숙지해놓아야 할것