티스토리 뷰
2025.02.07
분기점, 그리드
반응형, 적응형
정보 구조도, 플로우 차트, 와이어 프레임
계획표
1. 다양한 환경에 대한 UI 차이 이해
1) 웹과 앱의 차이
Wep
업데이트가 간단하고 접근성이 뛰어나지만,
다양한 기기에서 제약 없이 쓸 수 있지만 카메라나, GPS 등 성능 면에서 떨어진다.
푸시나 알림을 제공하기 어렵다.
App
안드로이드와 IOS앱 별도
앱 마켓에서 설치할 수 있고 업데이트마다 심사를 통과해야 한다.
기기에 특화된 기능 사용할 수 있지만 다양한 디바이스를 지원하는 것은 어렵다.
푸시 메세지를 보낼 수 있다.
2) 대표적인 웹과 앱의 UI 차이
페이지 이동
뒤로가기
주요 메뉴 이동
바텀 시트
3) OS별 차이
앱 심사 가이드라인이 다르기에 디자인이 다를 수 있다.
IOS
애플 로그인이 다른 로그인 수단에 비해 덜 중요하면 안된다.
홈 인디케이터 사용
안드로이드
네비게이션 바의 뒤로가기 버튼이 기본 UI로 제공된다.
2. 분기점 그리드
분기점
디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 한다.
나누는 기준점이 분기점이다.
가로 1024px 이상 > 데스크탑
가로 768px 이상, 1024px 미만 > 태블릿
가로 768 미만 > 모바일
태블릿은 온라인 강의나 교육을 제외하면 사용자가 적기 때문에
모바일 분기점으로 통일하기도 한다.
그리드
화면에 디자인을 배치하는 가이드라인이다.
글과 그림들을 균형감 있게 배치하기 위해서, 전체적인 완성도를 올리기 위해 사용한다.
세로 방향의 기둥을 칼럼이라고 부른다.
칼럼의 유닛은 콘텐츠를 정렬하는 기준선이고 거터는 유닛과 유닛 사이의 여백이다.
데스크톱 기준으로 12개를 사용한다.
3. 반응형과 적응형
해상도에 맞게 움직이는 디자인
반응형 디자인
실시간으로 해상도 변화에 반응한다.
적응형 디자인
한번 적응하면 움직이지 않는 고정된 디자인
관련 플러그인
Responsive
4. 정보구조도와 플로우 차트
제품을 사용하는 과정을 논리적으로 디자인하기 위해 작성한다.
정보구조도 (IA)
화면과 정보들이 어떤 구조로 연결 되어 있는지 나타내는 설계도
화면흐름도(Flowchart)
플로우차트
사용자가 어떤 과정을 통해 제품을 이용하는지 시각적으로 정리한 순서도
5. 와이어프레임
선으로 그려진 화면으로 주로 본격적인 디자인에 들어가기 전에 한다. (손그림, 종이 파워포인트, 피그마 등 사용)
팀원 간의 생각을 통일할 수 있고 협업을 원할하게 한다.
디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.
습관 형성 모델을 반복적으로 실험할 수 있다.
표현할 것과 표현하지 않을 것을 선택하고 단색을 사용하는 것이 좋다.
최대한 단순하게 그리는 것이 핵심이다.
화면을 선으로 연결해서 특정 버튼이나 화면을 연결할 수 있다.
회고
오늘은 디자인 숙련주차에 들어서면서 새로운 팀원들과 함께 하게 되었다.
오늘은 발제도 진행하고 팀 노션도 작성하느라 정신이 조금 없었다.
원래는 오늘 피그마 활용 심화 강의까지 듣고 같이 있는 과제도 같이 하는게 목표였는데
오전에 시간을 좀 많이 뺏겨서 그런지 시간이 애매해질 것 같아서 주말에 하기로 마음 먹었다.
앞으로의 피그마 강의를 보니 툴에 익숙해져야 될 것 같아서 피그마 강의들을 복습해야 될 것 같았다.
오늘 강의를 들으면서 반응형 디자인과 적응형 디자인의 차이를 알 수 있었고 분기점과 그리그의 개념에 대해서도 정확하게 배울 수 있었다.
다음 주에 할 학습
피그마 활용 심화 1주차 과제 TIL에 올리기
피그마 활용 심화 2주차 강의 듣고 과제까지 하기
하루 5분 UX 책 읽기