디자인카타
A 선택
42%의 사람이 A 선택
왜 해당 UI가 더 좋은지 작성합니다.
· 여러 개의 항목을 선택한 후 한 번에 삭제할 수 있는 시스템이기 때문에, 사용자가 더 신중하게 삭제를 결정할 수 있음.
· 선택한 항목의 개수 파악과 실행취소를 할 수 있고, '삭제하기' 버튼이 명확히 있어 기능을 직관적으로 이해하기 쉬움
나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.
· 항목 하나를 빠르게 삭제할 수 있다는 장점이 있음
· 하지만, 삭제 아이콘을 눌렀을 때 '정말 삭제하시겠습니까?'와 같은 확인용 모달 창이 안나타난다면 실수로 잘못 누르거나 신중하지 못했을 때 복구할 수 없음
A 2: B 2
A> 삭제하기의 색상과 느낌은 B가 나은 거 같지만, 기능적으로 A가 낫고 Primary 색상을 그만큼 중요하게 사용한것이 아닐까
B> 평소에 한 번에 정리할 일이 없고, 그때그때 하나 삭제하기 편하기 때문에 선택
B> 직관적으로 아이콘이 있어 바로바로 삭제할 수 있는 스타일을 선호
피그마 활용 심화 1주차
| 웹 | 앱 | |
| 운영체제 제한 | 없음 | 안드로이드와 iOS앱 별도로 준비 |
| 접근성 | 웹브라우저에 주소만 입력하면 가능 | 앱마켓에서 설치해야 함 |
| 업데이트 난이도 | 업데이트하기 쉬움 | 앱마켓 심사를 통과해야 가능 |
| 인터렉션 및 UI | 웹브라우저와 충돌하지 않는 선에서 가능 (ex. 바텀시트) | 다양하게 사용할 수 있음 |
| 성능 | 다양한 기기에서 제약 없이 쓸 수 있지만 그만큼 카메라, GPS, 사진 보관함 등 성능면에서 떨어짐 | 기기에 특화된 기능을 사용할 수 있지만 다양한 디바이스를 지원하게 만드는 것이 어려움 |
| 개인화 | 푸시나 알림을 제공하기 어려움 | 푸시 메시지를 보낼 수 있음 |
운영체제(Operating System; OS)
▷ 앱이나 프로그램을 실행하는 배경이 되는 시스템
· iOS, 안드로이드도 운영체제의 종류
· MacOS나 윈도우는 노트북이나 데스크톱 같은 컴퓨터의 운영체제
OS에 따라 UI를 다르게 사용하는 경우
▷ 아이폰의 경우, 애플 로구인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 함
▷ 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 함
▷ 같은 아이폰이라도, 홈 인디케이터때문에 차이가 생길 수 있음
앱과 웹의 UI에 차이를 두기 위해선 UI를 사용하는 목적과 상황을 모두 고려해서 다르게 해야 함
분기점 Breakpoint
▷ 디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
▷ 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 디자인을 보여줌
데스크탑, 태블릿, 모바일 3가지 기준점
· 가로 길이를 기준으로 함
· 가로 1024px 이상 데스크탑 화면
· 가로 768px 이상, 1024px 미만 태블릿 화면
· 가로 768px 모바일 화면
▷ 태블릿은 생략하거나, 해상도 전체를 모바일 분기점으로 통합하는 경우도 많음
▷ 온라인 강의나 교육은 태블릿으로 많이 함. !서비스에 따라 고려해야 함!
그리드 Grid
▷ 화면에 디자인을 배치하는 가이드라인
그리드를 사용하는 이유
▷ 균형감과 완성도, 일관성을 위함
그리드 만드는 방법
▷ 보통 12칼럼 그리드
· 모바일 웹디자인에선 기둥 4개 배치
· 태블릿에선 2배인 8개
· 데스크톱에선 3배인 12개
그리드 구조
▷ 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어짐
· 유닛은 실제 콘텐츠를 정렬하는 기준선, 거터는 유닛과 유닛 사이의 여백
· 한 개의 칼럼은 유닛 1개와 양쪽 거터 절반씩을 합친 크기
· 맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 좌우 여백으로 사용
그리드 예시
▷ 960 12 Column Grid 유닛 60 거터 20
▷ 1220 12 Column Grid 유닛 76 거터 24
▷ 1440 12 Column Grid 유닛 96 거터 24
그리드는 원칙이 아닌 가이드라인이기 때문에 꼭 있어야 하는 건 아님!
어딘가 모르게 어색하고 정렬되지 않는 느낌이라면 활용
반응형 디자인 Responsive
▷ 하나의 디자인을 놓고, 화면 크기의 움직임을 감지해서 실시간으로 반응
적응형 디자인 Adaptive
▷ 디자인을 처음 화면에 띄울 때, 화면의 크기를 감지해서 정해진 디자인만 보여줌
정보구조도와 플로우차트
정보구조도
▷ IA
화면흐름도(Flowchart)
▷ 플로우차트, 유저플로우, 유즈케이스
▷ 사용자가 어떤 과정으로 제품을 이용하는지 시각적으로 정리한 순서도
· 프로세스를 보여주는 다이어그램
피그마 활용 심화 2주차
역설계, 역기회 (Reverse Engineering)
▷ 원래 제품이나 프로그래밍에서 제품을 놓고 도면이나 설계도를 역으로 설계해내는 방식
1) 도메인 및 레퍼런스로 삼을 서비스 확인하기
▷ 도메인(Domain): 업계나 업종 (서비스 카테고리)
2) 역설계로 어떤 걸 확인하고 조사할 지 정하기
▷ 일반적으로 전체 제품과 과정을 다 분석해야 함
▷ 특정 구간이나 특정 요소만 분석하는 것도 가능
· 장바구니에 담은 상품이 없으면 어떻게 구매로 유도하고 있는지 과정 비교
· 메인 화면 가장 첫 화면의 배너 높이 비교
· 내 계좌 잔액을 보여주는 화면 비교
3) 조사 대상 화면 준비하기
▷ 화면을 직접 캡처하거나 레퍼런스 서비스에서 구하기 (직접 사용해보는게 제일 베스트)
▷ 스크롤이나 탭할 때 변화는 과정도 꼼꼼하게 잘 살펴보고, 필요하다면 화면 녹화
· mobbin(해외 서비스 위주), wwit(국내 서비스 위주), gdweb(국내 웹 위주)
4) 화면을 비교하며 분석한 내용 정리하기
형태, 양식 자유
예시
클론 디자인
▷ Clone(복제하다) + Design
클로닝의 목적
▷ 서비스의 UI 규칙을 파악해내는 것
· 어느정도 잘 알려져 있거나 규모가 있는 서비스를 참고하는 것이 좋음
피그마 활용 심화 3주차
버튼 컴포넌트 스택(Stack)
▷ 버튼을 상하, 좌우로 2개 이상 사용하는 경우
버튼 컴포넌트 독(Dock)
▷ 화면의 하단에 고정된 버튼 컴포넌트
· 여백 요소까지 고려해서 형태를 만들어두면 빠른 진행
· 실무에서는 기기 하단의 인디케이터 요소까지 고려해서 만들어두는 편
포지션 Position
▷ 화면 상에서 요소가 위치하는 방식
스태틱(Static)
▷ 가장 기본값, 요소에 아무런 속성값을 주지 않은 그대로의 상태
▷ 일반 프레임
픽스드(Fixed)
▷ 화면 전체를 기준으로 요소를 그 위치에 고정
▷ 프로토타입
앱솔루트(Absolute)
▷ 포지션은 픽스드와 같지만, 요소가 고정되는 위치는 화면 전체가 아니라 요소를 감싼 상위 컨테이너 기준
▷ 스태틱과 다른 점은, 상위 컨테이너가 반드시 오토레이아웃!
스티키(Sticky)
▷ 픽스드와 스태틱을 전환하며 적용되는 속성
▷ 스크롤 안에서는 스태틱이다가, 스크롤로 넘어가면 화면 상단에 고정됨
▷ 프로토타입
'내일배움캠프 본캠프 > 5월' 카테고리의 다른 글
| [내일배움캠프 본캠] 5/12 TIL (0) | 2025.05.12 |
|---|---|
| [내일배움캠프 본캠] 5/9 TIL (0) | 2025.05.09 |
| [내일배움캠프 본캠] 5/7~5/8 TIL (0) | 2025.05.08 |
| [내일배움캠프 본캠] 5/2 TIL (0) | 2025.05.02 |
