2일차입니다 !
아직은 아침 수업이 조금 졸리지만 ... 곧 적응되겠죠 ? ?!
9 to 6도 서서히 적응되어가길 ...
다른 분들은 어느정도 피그마에 대한 기본적인 사용법은 아시는 것 같던데, 저는 거의 노베이스라 오늘 수업이 굉장히 유익했습니다 피그마 관련 단축키나 크고 작은 꿀팁들 너무 소중했어요 두고두고 흡수할거에요
내가 보려고 정리하는 FIGMA 피그마 기본 단축키
SHIFT 계열 SHIFT + R = RULERSHIFT + \ = 배너SHIFT + 1 = 0%(전체보기) 파일 내 전체 오브젝트 보기SHIFT + D = DEV 모드SHIFT + S = 프레임들을 그룹핑하는 용 (모아서 SECTION 만들 때 아니면 잘 안 씀) ALT 계열ALT
with-mimi.tistory.com
두고두고 흡수하기 위해 바로 작성해둔 피그마 단축키 포스팅..
오늘의 작고 귀여운 과제가 있었는데요 바로 노션의 "멤버 소개" 탭에서 최소 5명의 분께 댓글 달아 드리기! 였어요 이 과정에서 다양한 분들의 소개 글들도 읽고 저도 따뜻한 댓글들도 받고 하면서 뭔가 더 동질감도 들고 열정도 생기고 아무튼 기분이 묘하더라고요 (너무 좋다는 뜻..) 다 함께 열시미 끝까지 달려봐요 아자아자
수업 내용 복습
* UX
사용자 경험은 연령, 성별, 시간, 장소, 맥락에 따라 다양하다.
이 말이 정말 중요한 것 같다. 이를테면 앱의 폰트가 커서 노년층 분들이 사용하기에 편리하다면, 젊은 층의 사람들은 큰 폰트를 촌스럽다고 여기는 경우가 있기 때문이다. 나의 서비스가 어떤 사용자를 겨냥하는지에 따라 사용자 경험을 고려해봐야 할 것 같다.
경험요소
- 경험요소란 서비스의 여러 요소 중에서 사용자의 경험과 연관 된 것이다.
- 경험요소는 What과 How로 구분된다.
ex) 네이버 지도
WHAT : 위치 찾기, 이동 경로 확인, 저장, 교통수단 저장, 공유, 닫기
HOW : 지도 확대/축소, 거리 안내, 소요시간 안내
좋은 사용자 경험이란?
- 사용자가 느끼는 불편함, 고충, 고통이 없는 것
- 서비스의 흐름이 자연스러우며 다음을 예상할 수 있는 것
- 서비스의 정체성이 명확히 드러나는 것
내가 사용자 입장에서 서비스를 이용했을 때, 분명 클릭을 눌렀는데 예상하던 다음 페이지가 아닌 광고나 이벤트성 창이 뜬다면 무의식적으로 불편함을 느꼈던 적이 있었다. 좋은 사용자 경험이란 "다음을 예상할 수 있는 것". 서비스의 흐름이 자연스러운 것이라는 말이 인상깊게 다가왔다. 사용자 입장에서 서비스의 흐름이 물 흐르듯 자연스럽고, 별 다른 생각이 들지 않을수록 ! 다르게 말하면 해당 서비스를 만드는 디자이너가 얼마나 사용자 입장에서의 불편하지 않을 서비스 흐름을 깊이 고민한 걸까 라는 생각이 들게 되는 것이다...
지금까지 말해왔던 사용자 경험은 6단계로 구분된다.
1. 유용성(USEFUL) : 사용자가 목적을 달성할 수 있도록 필요한 기능을 잘 제공하는 것
2. 신뢰성(RELIABLE) : 오류가 없고, 보안이 철저해서 믿고 사용할 수 있는 것
3. 사용성(USABLE)
4. 편의성(CONVINIENT) : 편의성은 "쉽고 직관적임을 넘어서는 편리함".
- 사용자가 목적을 달성하기 위해 어떤 노력이 필요한지를 파악한 후, 해당 노력까지 걸리는 과정을 축소시키는 걸 말하는 것 같다. 이를테면 즐겨찾기, 개인화 등이 있겠다.
5. 감성(PLEASURE) : 서비스를 좀 더 재미있고 , 사용자들이 매력적으로 느낄 수 있게 하는 것.
6. 의미성(MEANINGFUL) : 해당 서비스가 특정 가치를 지니고 있어, 일회성을 넘어서 지속적으로 참여하도록 만드는 것.
(ex. 카카오톡 선물하기)
UX 구성요소
1. 동기
2. 행동
3. 고충
4. 태도
5. 니즈
UX 여정
UX 여정은 사용자가 서비스를 사용하는 과정을 말한다.
외부탐색 → 접근 → 탐색 → 조회 → 주활동 → 부가활동 → 이탈
결론적으로 내 서비스가 과연 사용자에게 좋은 경험을 제공하는가를 체크하기 위한 항목은 아래의 "제이콥 닐슨 그룹의 10가지 휴리스틱 평가 원칙" 의 항목들을 보며 판별해보면 좋을 것 같다 ! 선생님께서 추후에 서비스 UI/UX 프로젝트를 만들 때 아래의 원칙을 하나하나 체크해가며 진행하라고 말씀하셨다.
* UI 디자인
TYPOGRAPHY
: 타이포그래피(Typography)는 '활자'를 의미하는 'Type'와 '기술'을 의미하는 접미사 'Graphy'의 합성어
활자의 서체나 글자 배치 따위를 구성하고 표현하는 것을 말한다.
- 웹을 만들 땐 글꼴을 최소 3개정도만 사용하자 (한글용, 영어용, 숫자용)
- 글꼴의 두께도 기본 3개만 사용하자. (BOLD, REGULAR, LIGHT )
- 가장 보편적으로 쓰이는 폰트 포맷 : TTF
- 보기 편한 행간 : 보통 글자의 1.5배
( 우선 1.4 ~ 1.7 사이로 연습해 보기)
- 웹보다 모바일로 할 때 글자든 사진이든 몇 픽셀씩 더 크게 가져간다.
- 한 줄에 들어가는 글자 수
: 짧은 문단에는 줄 당 20~40자, 긴 문단에는 줄당 40~60자를 넘지 않게 한다.
자간 - 주로 한글에서
커닝 - 주로 영문에서
자간 : 글자 중심 축 간의 간격( 글자의 모양과 상관없이 일괄적으로 조정하는 값)
커닝 : 속 공간 사이 간격 (글자 모양에 맞게 글자 간 간격을 조정하는 값)
폰트 SUIT = 숫자가 진짜 예쁨 다운받자
Sun – SUIT
Sun
sun.fo
- 폰트의 계층 구조
Text type
- 제목 Heading
- 부제목 Subheading
- 본문 Body
- 캡션 Caption
제네시스(GENESIS) 공식 웹사이트 | GENESIS Korea 제네시스(GENESIS) 공식 웹사이트 | GENESIS Korea
제네시스(GENESIS) 공식 웹사이트 | GENESIS Korea 제네시스(GENESIS) 공식 웹사이트 | GENESIS Korea
역동적인 우아함과 진보된 기술을 바탕으로 럭셔리 자동차의 새로운 기준을 제시합니다. 세단, SUV, 전기차, 컨셉카 등 제네시스의 다양한 모델을 만나보세요. | 제네시스 공식 웹사이트제네시스
www.genesis.com
제네시스 사이트 폼미폼미폼미네 반응형까지 반영되어있어요!! 디자인도 왕내스
컬러 가이드
BRAND COLOR : 특정 브랜드를 떠올렸을 때 자연스럽게 떠오르는 색상
SEMANTIC COLOR : 의미 전달 컬러 (경고/승인)
- 약 4개만 사용
GRAYSCALE COLOR : 타이포에서 많이 사용됨.
제가 정한 브랜드는 지금 쓰고 있는 여기도 티스토리인만큼 티스토리랍니다... !! ㅎㅎ
- 컬러 비율
: 색 구성 비율의 균형을 조화롭게 맞추는 공식, 60 - 30 - 10 법칙
60 - 배경
30 - 보조배경 (like 브랜드 컬러)
10 - 강조색
본 후기는 [ 유데미 x 스나이퍼팩토리 ] UI/UX 포트폴리오 과정 2기(Blog) 리뷰로 작성 되었습니다.
'UIUX 포트폴리오 과정' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 5일차 : 피그마 / 설문조사 제작, 모바일 UI (1주차) (1) | 2024.11.22 |
|---|---|
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 4일차 : UX 기획 / 피그마 (1주차) (3) | 2024.11.21 |
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 3일차 : UX 리서치 실습 / 피그마 수업 (1주차) (0) | 2024.11.20 |
| 내가 보려고 정리하는 FIGMA 피그마 기본 단축키 (0) | 2024.11.18 |
| [유데미x스나이퍼팩토리] UI/UX 포트폴리오 2기 - 1일차 UI / UX란? (1주차) (4) | 2024.11.18 |