[스파르타코딩클럽] UX UI 8기/사전캠프

[TIL] 1016 학습일지

sh.Hwang 2024. 10. 16. 17:43

[강의]체계적으로 배우는 피그마 기초 완전 정복 5주차

6~10강

 

프로토타입
디지털 제품에서 실제 제품 만들기 전, 테스트하는 것

구현 정도에 따른 단계
1)Lo-fi(Low-fidelity)
낮은 단계의 프로토타입, 전체 흐름을 맞춰볼 수 있는 수준. ex)와이어프레임
2)Hi-fi(High-fidelity)
실제 제품과 거의 유사한 수준의 프로토타입->프로토파이 활용하는 편

프로토타입을 만드는 이유
1)제품 출시 전 발생할 이슈에 대해 사전 예방이 가능.
아이디어와 컨셉을 실제 제품처럼 테스트해보고 결정에 도움. 시제품과 유사한 프로토타입은 사용자 대상 피드백 수집 도구로 사용 가능
2)팀 구성원과 시각 결과물로 효과적으로 소통 가능
3)기획단계에서 생각하지 못한 부분이나, 사용자 시나리오를 통해 나은 방향으로 수정 가능.


프로토타입 보기 2가지 옵션
1)실시간 수정 미리보기 모드(Shift+Space)
2)프레젠테이션 모드

스크롤 컨테이너 & 오버플로우

Overflow
- 프레임 밖으로 콘텐츠가 넘어가는 것
- 스크롤이 되게 하려면, 프레임보다 콘텐츠가 더 길어 넘쳐야 함
- 오버플로우가 되지 않으면, 스크롤이 생기지 않음.

Scroll Container
- 오버플로우가 생긴 프레임->스크롤로 만들어줌
- 스크롤 방식 설정: 프로토타입 패널에서 설정 가능 - No scrolling, Horizontal, Vertical, Both direction

Flow 만들기
1)트리거:'총의 방아쇠'를 뜻하며, 액션을 시작하는 조건, 이유. 이벤트라고 부르기도 함
① On click : 클릭 또는 탭/터치했을 때 액션을 실행해요.
 On drag : 드래그했을 때 액션을 실행해요.
 While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행해요.

     * Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과예요.

 While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행해요.

     * Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과예요.

 Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행해요.
 Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행해요.
 Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행해요.

 Mouse down : 커서/마우스가 영역을 누르면 액션을 실행해요.

 Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행해요.

⑩ After delay : 일정 시간이 지난 후에 액션을 실행해요.


2)애니매이션: 트리거를 통해 액션 실행시, '어떻게'를 정의. 화면 전환방법

① Instant: 별도 애니매이션 없이 즉각 실행

② Dissolve: Fade in/out

③ Smart animation: 이름이 같은 프레임들이 자연스럽게 움직임(온보딩 페이지처럼 하단패널 고정상태로 화면 전환 가능)

 Move in/out: 현재 화면 위, 다음 화면을 덮거나 벗겨지듯 전환

 Push: 화면을 밀면서 이동(인스타 이미지 넘기기처럼, 마치 연결된 화면같이 연출도 가능)

⑥ Slide in/out: 현재 화면을 지정한 방향으로 밀어 사라지면서(어두워지면서) 새로운 화면 등장(가장 많이 사용)

 

- 스마트 애니메이트

  : 자연스럽게 애니매이션을 넣는 피그마의 고급 기능

  : ① 작동하는 요소의 이름이 같고  프레임 레이어 구조가 통일되어야 잘 기능함

  : 프로토타입에서 가장 중요한 기능

  a. 크기(Scale)

  b. 위치(Position)

  c. 투명도(Opacity)

  d. 회전(Rotation)

  e. 배경색(Fill)


3)액션: 트리거로 인해 만들어지는 결과
   ex)버튼을 누르면(트리거) 색상이 천천히(애니매이션) 바뀐다(액션)

 Navigate to : 페이지(프레임)를 이동하는 액션이에요.
 Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션이에요.

    * 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있어요.
 Back : 직전 화면으로 이동하는 액션이에요.

    * 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있어요.

 [유료] Set variable : 변수를 특정 값으로 설정하는 액션

    *트리거를 실행하면 변수를 원하는 값으로 설정할 수 있어요

 [유료] Set variable mode : 변수를 특정 모드로 설정하는 액션

    * 트리거를 실행하면 변수를 원하는 모드로 설정할 수 있어요.
 [유료] Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션
 Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션이에요.

 Open link : 특정 URL을 여는 액션이에요.

    * 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있어요.

 Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션이에요.

    * 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용해요.

    *  스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불려요.

 Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션이에요.- 여러장의 팝

 Close overlay : 라이트박스을 닫는 액션이에요.

 


Design hand-off

개발자와 소통하기 위한 디자인 의도, 구체적 규격 및 속성을 기재한 문서

예시:https://www.designsystemsforfigma.com/blog/design-to-engineering-handoff

 

핸드오프 작성 시 원칙

1)구성 통일: 구성과 목차를 통일해야 원활한 소통 가능

2)최대한 자세하게: 어떤 디자인인지, 디자인 목적, 어떻게 만들면 되는지 이해하기 쉽도록 자세히 기재

3)쉬운 언어로: 개발자와 기획자도 이해할 수 있도록 최대한 쉬운 표현으로 풀어 기재

 

핸드오프의 구성

1. 디자인의 전체적인 구조

2. 각 프레임의 크기 및 길이

3. 각 프레임의 여백 및 간격

4. 사용된 폰트 및 컬러 스타일

 

DesignDoc[Spectral]

선택된 디자인의 핸드오프를 자동으로 만들어주는 플러그인

https://www.figma.com/community/plugin/1177722582033208360/designdoc-spectral-measures-annotations-and-handoff

 

 


 

[아티클 스터디]

https://www.notion.so/241016-11f67aa6abf380e18668fa30acf922a1

 

[241016] 모임 앱은 어떤 모습이어야 할까? - 앱 개선 | Notion

선정 아티클

malachite-pasta-a91.notion.site

[주제]

모임앱 개선 전후 비(’소모임’ 중심으로)

  • 메인화면
  • 개선방향
  • 개선

[아티클 요약]

메인화면의 문제점

  • 브랜드 정체성, 제공 핵심기능이 잘 드러나야 함 → 기존 앱에서는 부재, 앱의 매력도 저하
  • 약한 정체성
    • 명확하지 않은 탭 구성
      • ① 명칭: 무엇을 위한 ’유료’인지 표기 불명확
      • ② 아이콘: 이름과의 매칭이 직관적이지 않음(ex. 소모임-돋보기 아이콘)
    • 드러나지 않은 브랜드 색상
  • 모임 탐색기능 어려움
    • 어지러운 탐색 위계
    • 분류와 정체성을 알기 어려운 모임 리스트 정보

개선 방향

  1. 리서치: 모임을 매력적으로 보여주고, 가입 유도→ 첫화면에서 모임 검색, 인기 카테고리 찾기 쉽도록 아이콘 구분
  2. → 상단 히어로 섹션에서 클래스 소개 및 광고
  3. : 유료 클래스 중심의 앱, 클래스101과 Flip 중심으로
  4. 개선
    1. 탭 구성 개선
    → 명확하게 보여주기 위한 아이콘 모양 개선
    1. 대비 높은 색상 사용
    → 메인, 서브, 시스템 컬러 지정→ 서브컬러는 모임 분류&정보 아이콘, 일러스트, 큰 글씨, 정보 텍스트에 사용하기 위해 너무 칙칙해지지 않도록 최소 3:1 이상으로 조정
    1. 모임 큐레이션 중심으로 재편성
  5. → 메인컬러는 4:5:1이 넘도록
  6. → 저장 기능 추가

정리 중..ㅜㅜ


[인사이트]

  • 제공할 앱에 대해 리서치를 할 때에 어느 부분을 가져와야할지 논의해보아야겠음.
  • 사용자가 소모임에 대해 제목으로 규정 시에는 명칭에 대한 규칙(디자인 토큰처럼)을 정해두거나, 그룹핑해서 키워드/해시태그화 시키는 것이 좋겠음.

[인사이트보다는 의견..]

■ 앱아이콘: 감산혼합 or 가산혼합?

앱의 정체성을 위해 감산/가산 중 어느 것이 적합했을지부터의 논의가 필요하다고 생각함. 감산혼합이라면 깊이에 대해 담을 수 있을 것이고, 가산혼합이라면 하이라이트라는 키워드로 풀어갈 수 있었을 것 같음.

■ 히어로섹션에서 사용된 일러스트들에 적용된 서브컬러 선정한 기준이?

소모임 아이콘에서 각각의 스포트라이트가 의미하는 컬러가 있을텐데 그 의미는 무시한채로 컬러만을 가져와서 서브컬러로 지정함. 또한 히어로섹션에 적용된 컬러도 세가지로 제한되며, 이를 선정하는 기준이 모호함. 차라리 세가지 컬러를 모두 활용한 일러스트를 만드는 것이 중립적이라고 생각됨.

■ 첫화면 구성 순서

  1. 각자의 소모임이 앱 사용자의 메인으로 예상되는데, 신규 큐레이션이 메인이 되는 것이 맞는지? 소모임이란 이미 관심있는 분야가 명확한 사람들이 사용하는 앱이기에 새로운 취미를 발굴하기 위한 탐색 중심의 UX가 맞는지 리서치해보아야할 것이라고 생각 됨. 차라리 이를 분리하기 위해 히어로섹션엔 단발성인 클래스를 놓고 하단에 모임을 배열하는 것이 좋지 않을까
  2. 인기 관심분야 TOP도 유사한 맥락인데, 인기 TOP에 수차 랭킹되는 분야는 노출이 많아 점점 커지고, 내가 속한 소모임이 규모가 줄어들지 않을지. 오히려 인기없는 소모임에 대한 가입유도를 위 노출시켜주는 방향이 맞지 않을지.

[실제 앱이 개선된 방향]

  1. 장기 모임의 경우, 지역구 중심으로 편성하고, 1회성 클래스의 경우에는 별도로 운영되고 있음
  2. 아이콘: 세가지 원의 중첩이 아닌 다양한 도형들의 중첩으로, 다양한 사람들이 하나의 연결고리로 엮인 형태로 개선됨. 다만 교집합 부분이 소모임 앱의 정체성인데, 오히려 다양한 개인이 부각되는 것 같음
  3. 메인컬러 선정은 아직 의문: 버튼에 적용된 메인 컬러의 경우에는 선정 방식이 의문임. 일반적으로 많이 쓰이는 깔끔한 컬러를 임의로 적용한 것이 아닌지.. 무조건 브랜드의 색깔을 담을 필요는 없지만 중립적인 컬러(모노톤)이 더 일관적이지 않았을까 생각된다.

'[스파르타코딩클럽] UX UI 8기 > 사전캠프' 카테고리의 다른 글

[WIL] 사전캠프 3주차(마지막)  (3) 2024.10.18
[TIL] 1017 학습일지  (6) 2024.10.17
[TIL] 1015 학습일지  (2) 2024.10.15
[TIL] 1014 학습일지  (6) 2024.10.14
[WIL] 사전캠프 2주차  (6) 2024.10.11