[UX/UI][툴] Figma_2탄

[UX]

1. 정보구조(IA, information Architecture)

• 서비스를 정보 위주로 시각화한 설계도
• 구성요소 별 구성 기능 고민
• 우선순위에 따라 정보 구조 재구성
  
  
• 때에 따라 정보 구조를 생략하고 와이어프레임으로 대체하는 경우도 있긴 함
• 정보 구조를 그리지 않더라도 전체 구조 생각하기
• 와이어프레임에 정보 구조 함께 포함해서 공유하거나 팀 회의에서 그려서 공유하기

2. 와이어프레임(wireframe)

화면 설계, 화면 사이의 플로를 비롯해 실제적인 레이아웃을 그려보기

표현에 너무 오랜 시간을 보내지 말 것, 정보의 중요도에 따라 배치하도록 주의

 

3. 다양한 케이스 대응

• 어떤 컴포넌트에 관한 문제인지 정의
• 데이터를 받아올 수 없는 케이스 정의
• 데이터를 받다가 중간에 실패한 케이스 정의
• 데이터를 불러오는 중인 케이스 정의
• 그외 오류 메시지나 오류 상황 정의

 

[UI]

 

1. UI 디자인의 가치

• 심미성 : 브랜드 경험과 신뢰도에 기여
• 논리와 효율성
• 디자인 툴 활용 능력
• 디지털 환경의 이해

2. 프로덕트 디자인

• 사용자 이해하기 : 가설을 세우고 확인하기 위해 개선안을 지속적으로 테스트, 이해관계자와 팀원 의견 경청
• 데이터와 비즈니스 이해하기 : 주요 지표 발견하고 개선, 측정하기 위해 노력하여 데이터로 의사결정

3. 모바일 기기 디자인 환경 이해

• 픽셀 px(pixel) : 디지털 화상을 구성하는 최소 단위. 화소
• 해상도 dpi
• 일반적인 모바일 해상도 기준 : 안드로이드 360X740, ios 375X812
• 스탯카운터 : os별 국가별 기기 비중 등 참고 사이트
• 안드로이드 환경 해상도 : dp(density independent pixels), sp(scale independent pixels), 4배수까지 설정
• ios 환경 해상도 : pt(point) 단위, 3배수로 

4. 콘셉트 UI

• 유사 서비스 메인 UI 살펴보기
• 공통점 찾기
• 콘셉트 UI 기능별로 분석하기

5. 레퍼런스 UI

하나의 앱을 지정해 컴포넌트의 역할을 서비스 관점에서 유추해보기

• 첫인상 : 화면 비중, 뚜렷한 특징, 눈에 띄는 요소 특징
• 기능별로 살펴보기 : 상단/중단/하단 UI
• 인사이트 도출

6. 참고 자료

• 웹 검색
• sns, 커뮤니티 검색
  • 피그마 포럼
  • 페이스북 그룹
  • 카카오톡 오픈채팅
  • 링크드인
  • 서핏
  • 책
  • 브런치, 미디엄 등 아티클 플랫폼
  • 앱스토어, 구글 플레이스토어
• 사내 위키, 히스토리 검색

---

[Figma]

 

1. Constraints

프레임 크기에 따라 요소의 간격, 위치를 조정하는 기능

 

2. Scale

• 설정된 UI 규칙과 상관없이 직관적으로 크기조절 할 때
• constraints를 무시하고 오브젝트 크기 조절 가능

3. frame

루트 프레임(root frame) : 가장 바깥 프레임

프레임 속 프레임(nested frame) : 하위 프레임

 

4. snap

오브젝트 크기나 위치를 조절할 때 그리드에 맞도록 자동으로 조절하는 기능

 

5. 오버라이드(override)

인스턴스에서 큰 틀을 유지하며 세부 요소를 수정하는 것

인스턴스에서 덮어씌운 값을 다시 원본으로 초기화하는 작업

 

6. absolute position

• auto layout 규칙과 별개로 컴포넌트에 오브젝트 추가 가능

7. 단축키

• 상위 레이어 선택하기 : shift + enter
• 프레임 입히기 : ctrl + alt + g
• 아웃라인 따기 : ctrl + alt + 0
• 컴포넌트로 변환하기 : ctrl + alt + k
• 검색창 : ctrl + p
• 전체 화면 흐름 확인 : shift + 1
• 맨 앞으로 보내기 : ctrl + alt + ]

실습

• 실제 서비스 조사하기
  • 시장에서 성공적으로 안착한 서비스 3가지, 앱을 써보며 성공한 이유 분석
  • 사용 중인 서비스 3가지, 왜 사용중인지 핵심 이유 정리
  • 사용하고 있지는 않지만 크게 호응을 얻고 있는 서비스 3가지와 이유 정리
• 나만의 콘셉트 UI 디자인
  • 나만의 콘셉트 구상, 핵심 컴포넌트 디자인
  • 해당 컴포넌트가 선정한 서비스가 왜 핵심적인지 설명
• 클론 UI
  • 이미 출시된 앱을 그대로 따라서 디자인하기
  • 하루 1시간 씩 시간을 내어 유명한 서비스 UI 캡쳐해 그대로 만들기
  • 서비스에 녹아있는 패턴, 그리드, 아이콘, 폰트 스타일 등 디자인 규칙 습득하기
• 자신에게 맞는 검색 방법 찾기
  • 플랫폼
  • 검색 키워드
  • 발견한 정보
  • 유의미한 사이트

기타

• 디자인 핸드오프 : 완성된 디자인 시안을 개발자에게 공유하는 것
• 무료 한글 폰트 : 눈누 사이트
• 5whys 
  • 현재의 문제 상황을 잘 이해할 수 있는 배경 적기
  • 단계마다 현상과 이유를 적기(협업 중이라면 단계별로 이유에 대해 합의하는 시간 갖기)
  • 합의된 문장 확정하고 다섯번 반복
  • 도출 가능한 해결책 적기
• 5whys, 사용자 페르소나, 고객 여정 지도 등 활용
• fab : floating action button 화면 스크롤과 상관 없이 항상 같은 자리에 떠있는 버튼
• 드로워 : 다양한 요소를 가지고 숨겨져 있다가 한쪽에서 열리는 ui 컴포넌트
• 백드롭 ui : 기존 화면 위에 덮이는 ui. 풀 페이지 까진 아니지만 일부 상단 영역을 제외한 대부분의 화면 차지
• 디렉터리 구조 : 계층을 나눠 정보를 관리하는 구조
• 엣지 케이스 : 서비스 전체 구현 방식과 다르게 구현된 현상. 로딩 실패, 버그, 오류 메시지 등
• 넛지 : 유용한 정보를 적절한 타이밍에 알려줌으로써 해당 서비스 유입을 유도하는 기획
• wip : work in progress
• 주요 사용자 플로 예시
  • 핵심 서비스 이용
  • 가입/로그인
  • 첫 결제 연동
  • 프리미엄 서비스 구매
  • 콘텐츠 업로드
  • 콘텐츠 저장
  • 콘텐츠 검색, 브라우징
  • 알림 설정
• 디자인 QA
  • 서비스를 사용하는 대부분의 사용자 환경에서 구현한 화면과 플로가 의도한 기획과 일치하는가?
  • 최초 디자인 시안과 얼마나 근접하게 구현되었는가?
  • 하위 호환 버전에서 중대한 디자인 오류가 발생하는가?

 

 

 

 

 

참고한 자료 

• 도서 : 프로덕트 디자인 입문 with 피그마 https://www.yes24.com/Product/Goods/116918123