고정 헤더 영역
상세 컨텐츠
본문
본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.
피그마
레이아웃 그리드
그리드의 형태는
베이스라인 그리드 - 텍스트가 놓일 위치를 결정하는 균일한 수평선 격자
원고 그리드 - 단순히 페이지 위에 텍스트가 놓인 1단 그리드
모듈 그리드 - 웹사이트에 많이 활용. 교차하는 열과 행으로 레이아웃을 만드는 그리드
그리드 용어
컨테이너 - 사진 이미지 텍스트 등 디자인요소가 들어가는 부분
container , content width라고 부름
컬럼 - 열 또는 단
커터 - 컬럼과 컬럼 사이
마진 -좌우 여백
그리드를 보기 안보기 단축키는 shift + G
레이아웃 그리드
권장 가이드라인은
모바일 화면 (375)
4컬럼 - 마진 16 -거터 16~20
테블릿 (768)
8컬럼 - 마진 32- 거터
데스크탑 (1440~1920) - 최소 디바이스 크기 1280~
12컬럼 - 마진(현재 디바이스크기 - 최소 디바이스크기 / 2 ) - 거터 (12~30)
모바일을 가로모드로 하면? 그리드 다시 그리셈ㅋ
에셋패널
에셋패널에서는 스타일과 컴포넌트를 퍼블리싱하고 팀원과 함께 공유한다
자주 사용하는 엘리먼트(버튼, 아이콘)나 컴포넌트(네비게이션바, 탭바, 카드 ui)를 저장하고 공유하는 패널
, 스타일 컴포넌트등을 팀과 공유하기 위해 만들어 다른 프젝에도 공유해서 사용한다 유료부터 컴포넌트까지 가능하다 무료는 스타일까지만...
퍼블리싱이 업데이트되면 저기 책모양에 파란색 점이 생긴다
오토 레이아웃
자동으로 변하는 레이아웃
버튼 카드에 많이 사용
단축키
shift + a -생성
shift + opt + a - 해제
cmd + d-> 오토레이아웃 취소
stokes 테두리
include in layer -테두리를 포함
excluded from layer -테두리 포함안됨
canvas stacking (아이템 쌓이는 순서 설정)
first - 첫번째아이템이 위로
last - 마지막아이템이 위로
Align Text baseline - 텍스트 베이스 라인 설정
Direction 방향
오토레이아웃 안의 아이템 방향을 설정
vertical - 세로
horizontal - 가로
wrap -자동줄 바꿈
리사이징
반응형 레이아웃을 만드는 크기 조정 옵션으로 가로세로 다 설정 가능
Hug - 자식 요소 크기에 따라 부모의 오토레이아웃이 늘거나 줄어듬
Fixed width/height -가로 또는 세로의 고정된 값으로 크기를 유지
Fill - 자식요소를 부모 크기에 가득 차게한다
확인이 width가 hug일시 자식요소인 "확인"의 크기에 따라 부모의 오토레이아웃이 줄어듦
취소는 fill이기에 부모요소의 변화가 없다
만약 fill container 가 안보이면 그건 부모 프레임이 없어서이다 . 자식요소에서만 세팅이 가능하기 때문이다
아이템 사이간격은 숫자 나 auto로 설정하면된다 auto는 justify-content : between이라 생각하면됨
UX
페르소나
누가 우리 서비스를 이용할지?
연령대는? 성별은?
어떤 사용자가 우리 서비스를 좋아할까?
페르소나는 경험이 동일한 사용자들을 묶은 후 가상의 인물이다
디자인의 논리적 근거를 만들어 두고 디자인 방향을 잡는데 도움을 받는다
신뢰할 수 있는 데이터를 기반으로 페르소나를 만드는 것이 좋다.
페르소나를 만드는 이유
어피니티 노트를 기반으로 사용자의 공통된 패턴을 반영하여 사용자의 니즈, 행동 동기, 목표를 이해하기 위한 것이다.
페르소나 단계
1. 사용자조사
2. 뼈대 만들기
사용자의 행동과 동기에 가장 중요한 영향을 주는 요인을 파악하고 페르소나의 수를 정한다
조사한 자료를 토대로 다양한 요인을 파악한다
서비스(제품)와 관련해 사용자가 가지는 특성을 파악한다
사용자의 태도,적성,기술적 능력 등을 고려한다
예시) 나이, 직업, 성향, 모바일 앱 친숙도, SNS 친숙도, 사용빈도 등 요소를 작성
3.페르소나 이야기 풀어내기
페르소나의 행동에 패턴을 부여하고 원인을 자세히 이야기로 풀어낸다
페르소나의 환경과 상황을 설정하고 아주 상세하게 이야기를 적는다
예시1) ???은 커피를 좋아하지만 매일 고가커피는 마실수 없다
Needs(사용자의 요구)
인지적 니즈 : 서비스를 인식하고 의미를 찾거나 추측하는 등 이성적인 경험
감성적 니즈 : 재미, 선호도, 즐거움, 스트레스 등 서비스에 대한 감성적인 경험
신체적 니즈 : 마우스나 키보드 조작, 인식, 습관적인 반응 등의 육체적 경험
개인정보 도출 - 사용하는 서비스,디바이스 sns 특정 - 서비스 사용 동기 파악 -니즈 파악 - 페인포인트(사용자가 본 문제점, 불편함)알아보기 -페인포인트 해결
사용자 여정 지도
개별 Persona들이 제품 이용흐름에 따라서 어떤 경험의 변화를 보이는지 시각화시키는 작업
사용자의 경험을 프로세스별로 자세히 이해하기 위한 가설 수립 방법이다
단계별로 감성, 행동, 문제점, 해결책, 요구사항 등 작성한다
이건 두번째 시간에 한거!
그리고 유저플로우까지 배우고 이번주말에 저 모든 내용 "컴포즈커피"에 담을 예정이다 )과제거든요
