웹 ·앱 차이
분기점과 그리드
▪️분기점
디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점
- 웹사이트를 방문할 때 주로 스마트폰의 웹브라우저를 사용하지만, 테블릿, 데스크탑, 노트북으로도 웹사이트를 방문
* 이때 웹사이트는 우리가 쓰는 디바이스 화면 크기에 따라 다른 디자인을 보여준다.
- 사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야하는데 나누는 기준이 분기점이다.
▪️그리드(격자)
가로선과 세로선을 직각으로 교체되게 만든 것
- 화면에 디자인을 배치하는 가이드라인
- 일반적으로는 세로 방향의 기둥들을 좌우로 세우지만 가로줄을 추가로 사용하는 경우도 있다.
- 디자인을 배치할 기준선이 되는 가상의 선을 긋고 그 선에 맞춰 레이아웃을 짠다.
그리드를 사용하는 이유는 ?
반응형 웹이 분기점마다 디자인을 바꿀 때 그리드를 따라 정렬됨
- 종이에 글과 그림을 배치하는 기준점
- 글과 그림들을 균형감 있게 배치하기 위해
- 주목해서 읽어야하는 부분을 강조하고 적당한 간격을 만들어 더 잘 읽히게 하기도 하는 등 전체적인 완성도를 올리기 위함
- 균형감, 완성도, 일관성을 위함
그리드 구조
- 칼럼은 유닛과 거터로 이루어졌다.
- 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백
- 한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기
- 맨 양 끝의 칼럼 끝은 거터 절반이 남는데 좌우 여백으로 사용
▪️자주 사용하는 그리드 예시
반응형과 적응형
해상도에 맞게 움직이는 유동적인 디자인
- 디자인은 데스크탑부터 모바일까지 화면의 크기가 다양 때문에 디자인도 화면의 크기에 대응해서 레이아웃이 달라야 한다.
▪️반응형 디자인
- 반응하는 디자인
- 해상도의 변화에 실시간으로 반응
* 변화가 점직적이라고도 표현
▪️적응형 디자인
- 한 번 적응하면 움직이지 않는 고정된 디자인
- 해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않는다.
디자인을 브라우저에 띄울 때 차이
- 반응형 디자인
- 적응형 디자인
정보구조도와 플로우차트(화면흐름도)
▪️정보구조도
- 정보구조도의 영문 앞글자를 따서 IA로 부르기도 한다.
- 화면과 정보들이 어떤 구조로 연결되어 있는지를 나타내는 일종의 설계도라고 할 수 있다.
ex. 제품을 건물이라고 생각했을 때
▪️화면흐름도
- 플로우차트라는 이름으로 더 많이 사용
* 유저플로우나 유즈케이스라고 부르는 경우도 있음
- 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도라고 할 수 있다.
*순서도 : 프로세스를 보여주는 다이어그램. 상자들과 화살표를 이용해서 문제에 대한 해결 과정을 도식화
ex. 제품을 건물이라고 생각했을 때
와이어프레임
화면과 시나리오를 푀대한 단순한 형태로 만들어서 빠르게 만드는 것
- 선(와이어)으로 그려진 화면
- 어떻게 만들지 논의하는 과정을 거친 후 본격적인 디자인을 하기 전에 주로 제작
- 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype이라고 부를 때도 있다.
와이어프레임은 왜 만들까 ?
- 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.
- 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.
- 습관 형성 모델을 반복적으로 실험해 볼 수 있다.
와이어프레임을 그리는 방법은 ?
손으로 종이나 화이트보드에 그릴 수 있고 종이를 오려만들기도 한다. 파워포인트나 피그마를 사용해서 만들기도한다.
* 최소한의 가독성만 확보하고 서로 이해할 수 있다면 어떤 방식도 상관없다.
- 표현할 것과 표현하지 않을 것을 과감하게 고르기
- 최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용
- 최대한 단순하게 그리는게 핵심
- 시나리오에 필요하지 않은 부분은 과감하게 글자나 단순 도형으로 대체
- 텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용으로 넣어준다
- 화면을 선으로 연결하기
서비스 역으로 설계하기
▪️역설계
이미 잘 만들어진 서비스들을 참고하여 어떻게 서비스를 만들지 알아보는 과정(역기획)
역설계 과정
1. 도메인 및 레퍼런스로 삼을 서비스 확인하기
2. 역설계로 어떤 걸 확인하고 조사할지 정하기
3. 조사 대상 화면 준비하기
4. 화면을 비교하며 분석한 내용 정리
- 여러 레퍼런스 화면을 놓고 비교하면서 찾아낸 내용을 잘 정리하기
- 캡처하거나 레퍼런스로 구한 화면을 피그마 파일 안에 넣어서 다양한 관점으로 분석
- 이미지의 크기는 모바일 스크린 사이즈로 줄여서 보기
클론 디자인과 규칙 찾아내기
▪️클론 디자인
Clone(복제하다) + Design : 디자인을 복제한다. 다른 서비스의 디자인을 따라하면서 규칙과 스타일가이드를 분석하는 훈련
- 역설계와 유사하게 이미 잘 만들어진 서비스를 놓고 어떻게 만들어졌는지 디자인을 직접 따라해보면서 분석하는 과정
- 디자인의 의도나 UX 전략을 찾아내는 것 보다 어떤 규칙으로 UI가 만들어졌는지 찾아내는 과정
- 일반적으로 역설계 과정에서 UI 분석도 같이 하기때문에 클론 디자인도 함께 진행
클론 디자인을 하는 이유는 ?
- 잘 만들어진 서비스의 디자인 시스템이나 스타일 가이드를 역으로 추척해봄으로써 어떤 UI 규칙을 가지고 있는지 파악 가능
- UI 디자인이 익숙하지 않을 때 다양한 UI를 직접 따라 그려보면서 규격, 크기, 형태, 색상 등에 대한 나름의 기준점을 만드는 것에 도움을 준다.
클론 디자인 과정
1. 디자인 할 서비스 정하기
- 역설계를 했다면 역설계에서 분석한 서비스를 클론하는 것이 역설계와 클론 디자인 시너지를 만들기 더 수월
- 한 번에 여러 서비스를 비교 분석하는 것이 아니기 때문에 서비스 하나만 선정해서 집중
- 주요 사용자 흐름을 한 세트로 캡처해 해상도에 맞게 준비
2.전체적인 레이아웃 규칙 발견하기
- 전체적인 레이아웃부터 접근
- 위에서부터 영역의 높이나 간격, 좌우의 여백 등을 파악
- 측정은 정확하지 않아도 괜찮. 규칙을 발견하는게 중요
3. 세부적인 UI 따라하기
- 전체 레이아웃 확인 후 레이아웃에 맞게 세부 규칙을 파악
- 전페적인 배색은 어떻게 썼는지 폰트는 어떤 규칙인지 최대한 추론
- 큰 덩어리부터 시작해서 세밀한 부분으로 좁혀 들어가는 것이 좋다.
- 아이콘처럼 서비스에서만 볼 수 있는 특수한 UI는 임시로 다른 걸로 대체해도 상관없다.
4. 스타일가이드 정하기
- 찾아낸 UI 패턴들이 어느정도 규칙성이 있다면 스타일가이드 문서로 정리 가능
- 서비스 안에 숨은 모든 UI 규칙을 찾아내는 것은 한계가 있어 찾을 수 있는 만큼 찾아서 정리
오늘 강의를 더 들었지만 양이 많아서 오늘 정리는 여기까지만,,
❕어제 과제를 제출하자마자 다시 받은 오늘 과제❕
다시 과제를 할 생각에 막막하지만 제일 처음 들었던 피그마 강의에 튜터님이 우리 캠프 튜터님으로 새롭게 오셨다 ! 이거는 매우 반가운 소식 🌟 강의에서 봤던 내적친밀감 때문에 처음으로 튜터님 방에 슬쩍 찾아가보기도 했다. 모르는게 있으면 튜터님들께 찾아가기로하며 짧은 대화를 끝냈다.
과제도 걱정되고 강의 숙제도 막막하지만 반가운 소식도 있었으니까 내일도 화이팅해서 남은 거 열심히 ⭐
'UXUI' 카테고리의 다른 글
| 다시 만난 주주 👧🏻 (5) | 2025.05.12 |
|---|---|
| 늘어지던 금요일 💦 (11) | 2025.05.02 |
| 첫 개인 과제 끝 🤦🏻♀️ (0) | 2025.04.30 |
| [내일배움캠프] 뛰어간 이번 주 🏃🏻♀️ (0) | 2025.04.26 |
| [내일배움캠프] 오늘은 수요일 ✊🏻 (8) | 2025.04.23 |