2)1~6 | UI기초 | UIUX 디자인 스쿨 주 3일반 학습일지

 

🎯학습 내용

2-1 디자인환경
2-2 레이아웃과 그리드시스템1
2-3 레이아웃과 그리드시스템2
2-4 컬러시스템
2-5 타이포그래피

2-6 아이콘

---

 2-1  디자인환경

1. 모바일 디자인의 환경과 규칙 이해

1-1. 모바일 환경의 이해
- 모바일 환경에서의 디자인 규칙에 대해 이해하고 있음
- 모바일 환경 안에서의 주요 축과 그 의미에 대해 설명함
- (중요) 모바일 환경에서의 '직류(180)'의 형태와 '이어레인(70~80)'에 대해 논의함
- 모바일 환경에서 '셀레스(0)'이 어떻게 표시되는지 설명함

1-2. 모바일 디자인의 환경 규칙 이해
- 모바일 디자인 환경에서 사용되는 다양한 규칙과 그 의미를 이해함
- '아파트 층수(엘리베이션)'이 어떻게 화면에서 표시되는지 설명함
- '셀레스(0)'이 어떻게 표시되는지 설명함
- (중요) '밀도(1)'과 '해상도(1)'이 모바일 디자인에서 어떻게 적용되는지 설명함

1-3. 모바일 디자인의 환경에서의 밀도와 해상도
- 밀도와 해상도의 개념을 이해하고, 모바일 디자인에서 어떻게 적용되는지 설명함
- (중요) '디피아이(MDpi)'가 어떻게 표시되는지 설명함
- 디피아이(MDpi)를 사용한 모바일 디자인에서의 해상도 표현 방식을 이해함
- 1.5배율로 표시되는 엑스트라 하이(MDpi)에 대해 설명함

2. 모바일 디자인 환경

2-1. 디자인 환경과 기준
- 표준화된 베이스를 사용해 로고를 그리는 방법을 설명함
- 로고의 퍼센테이션은 2배율을 기준으로 함
- 사과 로고의 둘레와 퍼센테이션을 계산하는 방법을 제시함
- 모바일 디바이스에서 사용되는 1배수, 2배수, 3배수의 밀도력을 설명함
- 기준화된 해상도와 디바이스에서의 해상도 차이를 비교함

2-2. 레이아웃과 그리드 시스템
- 레이아웃이란 디자인할 때 텍스트나 이미지 등을 배열하는 것을 의미함
- (중요) 레이아웃을 통해 보는 이의 이해를 돕고, 통일성과 조화를 이룸
- 웹 서비스, 모바일 플랫폼, 프레젠테이션의 디자인에 레이아웃을 적용함
- (중요) 그리드 시스템은 레이아웃에서 콘텐츠를 최적의 위치에 배치하는 방법임
- (중요) 다양한 레이아웃 시도를 통해 감을 익히고, 효율적인 콘텐츠 배치를 이해함

2-3. 디자인 리소스와 실습
- 타겟 디바이스의 해상도와 폰사양을 고려한 디자인을 강조함
- 해상도가 기준이 되는 디자인을 해야 함을 강조함
- (중요) 디자인 용량과 리소스 관리의 어려움을 설명함
- 레이아웃과 그리드 시스템에 대한 이해를 돕기 위해 예시를 제시함
- 다음 강의에서 레이아웃과 그리드 시스템에 대해 더 자세히 다룰 예정임

3. 디자인 퍼포먼스의 요소와 그리드 시스템

3-1. 디자인 퍼포먼스의 요소와 레이아웃
- 디자인 퍼포먼스의 요소 중 하나로 레이아웃을 배치하는 것이 중요함
- (중요) 레이아웃은 화면을 아름다운 형태로 배치하며, 볼드 텍스트와 얇은 텍스트 간의 강약이 디자인적 심미성을 높임
- 또한, 디자인 레이아웃은 디바이스의 확장에 따라 다르게 배치될 수 있음

3-2. 그리드 시스템의 중요성과 구성
- 그리드 시스템은 디자인 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓음
- (중요) 이 과정을 통해 한정된 디자인 화면 영역을 효과적으로 활용할 수 있음
- 디지털 프로덕트에서는 눈에 보이지 않는 가이드라인처럼 작용하며, 디자인 시작 전에 미리 설정하는 것이 좋음

3-3. 그리드 시스템 기본 세팅과 실습
- 그리드 시스템의 기본 세팅을 포토샵에서 하며, 이 과정에서 디자인 화면의 크기, 색상, 격자 간격 등을 설정함
- 이 설정을 통해 디자인의 일관성을 유지하면서도 다양한 디자인을 적용할 수 있음
- 실습을 통해 설정한 그래픽 요소들을 적용하고, 디자인을 생성해봄

 

 

 

 

---

 2-4   컬러시스템

 

1. 디자인 컬러

1-1. 프라이머리, 세컨더리, 그레이스케일 컬러
- 디자인 컬러를 프라이머리, 세컨더리, 그레이스케일 컬러로 구분함
- 프라이머리 컬러는 메인 컬러, 세컨더리 컬러는 보조 컬러, 그레이스케일 컬러는 기본 배경을 의미함
- 컬러 구성 시 레이아웃과 대비를 위해 그레이스케일 컬러를 사용하기도 함
- 컬러 단계별 레인지를 정의하고 화면 디자인에 반영함
- (중요) 레이아웃의 요소별 컬러 대비를 위해 레인지를 정의하는 것이 중요함

1-2. 컬러 조합과 디자인
- 메인 컬러와 세컨더리 컬러를 조합해 디자인 요소를 구성함
- 메인 컬러를 흰색, 세컨더리 컬러를 검은색으로 사용해 대조 효과를 줌
- 메인 컬러의 색상은 프라이머리 컬러에 비해 변형된 범위가 작음
- 세컨더리 컬러는 메인 컬러보다 작은 영역에서 작게 사용해 보조적으로 사용함
- 프라이머리 컬러를 베리에이션한 컬러로 두면 디자인 요소에 차별화를 줄 수 있음

1-3. 백그라운드와 서페이스
- 백그라운드는 평면의 아래를, 서페이스는 모듈 위에 올라온 표면의 컬러를 의미함
- 백그라운드와 서페이스 컬러는 흰색, 모듈 내 컨테이너 컬러로 반영되기도 함
- 백그라운드와 서페이스를 구분하는 것이 중요하며, 모듈 안의 컨테이너 컬러도 고려해야 함

2. 디자인 컬러

2-1. 디자인 색상 구성
- 프라이머리, 세컨더리 컬러 사용으로 디자인 구분함
- 레드색을 프라이머리, 그레이를 세컨더리로 사용함
- 그레이스케일 컬러를 '아이스톤'으로 변경하고 배경에 적용함
- (중요) 배경은 그레이스케일 컬러로 설정, 서브모듈은 흰색으로 설정
- 에러 컬러와 중복되는 색을 주의해서 사용함

2-2. 컬러 정의와 활용
- '포인트 컬러'는 활성화, 에러 등 상황에 따라 컬러 정의함
- 포인트 컬러를 사용해 입력 박스의 상태를 표현함
- '에러 컬러'는 '에러'를 붉은색으로 표현함
- '인풋 박스'를 디자인할 때 활성화, 에러 등의 상태를 고려함
- (중요) 색상의 라이트, 다크 버전을 염두에 두고 다듬어가며 사용함

2-3. 컬러 칩과 사이트
- '컬러 칩'을 통해 색상 조합과 캡처를 쉽게 함
- '드리블 닷컴' 사이트에서 컬러 기준 디자인을 검색할 수 있음
- 좋은 작업물들을 소팅하고, 폴더를 만들어 저장할 수 있음
- 좋아하는 색상을 모으고, 필요한 경우 다운로드해서 사용할 수 있음
- 이후 컬러 조합 고민을 생략하고, 좋은 색상들을 바로 찾을 수 있음

---

 2-5  타이포그래피

1. 타이포그래피 시스템의 구성과 활용

1-1. 타이포그래피 시스템의 정의와 필요성
- 타이포그래피 시스템이란 디자인에서 글자, 제목 등의 위치와 크기를 체계적으로 정의하는 것을 의미함
- 텍스트 사용에는 정해진 규칙이 존재하며, 이는 타이포그래피 시스템에 반영되어야 함
- (중요) 디자인 시스템의 일관성을 유지하기 위해 타이포그래피 시스템은 사용자에게 자연스러운 가독성을 제공해야 함
- 타이포그래피 시스템은 웹사이트, 디자인, 앱 디자인 등 다양한 분야에서 활용되고 있음

1-2. 타이포그래피 시스템의 구성과 디자인
- 타이포그래피 시스템은 기본적으로 타이틀, 본문, 오버라인 등의 컴포넌트로 구성되어 있음
- 이들 컴포넌트는 다양한 폰트와 스타일을 통해 조합되어 사용되며, 이는 디자인의 중요한 요소임
- 디자인자는 본문과 타이틀을 적절하게 조합하여 본인의 시스템을 만드는 것이 중요함
- 디자인 화면에서 본문의 크기는 보통 14-16 사이즈로 사용되며, 이는 디자인 가이드에 따라 정해짐

1-3. 타이포그래피 시스템의 효과적인 활용
- (중요) 타이포그래피 시스템은 디자인의 일관성을 유지하면서도 가독성을 높여줌
- 특히, 요소별로 적절한 폰트를 사용하는 것이 중요하며, 이는 디자인의 효과성에 큰 영향을 미침
- 디자인자는 본인의 타이포그래피 시스템을 유지하고 개선하는 데 노력이 필요함
- 특히, 배달의 민족 앱의 경우, 브랜드 서체를 사용하면서도 사용되는 폰트에 대한 논의가 중요함

2. 브랜드 서체의 중요성과 활용 방법

2-1. 브랜드 서체의 중요성
- 브랜드 감성이 담긴 서체는 브랜드 이미지와 캐릭터를 강하게 반영
- (중요) 특정 영역의 가독성을 해치지 않고 브랜드의 정체성을 담을 수 있는 범위에서 서체를 사용
- 콘텐츠에 집중해야 하는 부분에는 고딕체를 사용하여 가독성을 올림
- 사용자들이 원하는 정보에 대해 인지하고 사용하는 것이 중요

2-2. 브랜드 서체의 선택과 활용
- (중요) 브랜드 서체는 브랜드의 아이덴티티에 있어 가장 직접적인 정보 전달의 매체
- 나이키는 서체를 활용하여 브랜드를 점령한 좋은 사례
- 서체는 브랜드의 목소리이며, 환경 문제 해결에도 앞장섬
- 러쉬는 손글씨와 모범생 같은 서체를 사용, 사회 환경 문제에 적극적인 태도를 보여줌

2-3. 시스템 폰트의 활용
- 브랜드 서체가 아닌 시스템 폰트를 사용해야 하는 상황이 많음
- (중요) 해당 OS에서 제공하는 기본 시스템 폰트를 사용하거나 라이선스를 구매하여 사용
- 안드로이드는 로보토 서체를 사용하며, 다운로드를 통해 사용 가능
- 애플의 IOS는 샌프란시스코 서체를 적용하여 사용 가능

 

 

---

 2-6  아이콘

1. 앱 아이콘 사이즈 가이드

• 처음엔 가이드라인 사이즈를 따라 기준점 잡기
• 이후 서비스 특성에 맞게 사이즈를 약간 조정해도 됨
• iOS 앱 아이콘 사이즈는 공식 가이드라인 참고해서 작업

2. 시스템 아이콘 사이즈 (중요)

• 시스템 아이콘은 내용과 무관하게 24x24 사이즈로 통일
  → 서로 다른 크기는 디자인 비효율성과 사용성 문제 발생
• 실제 디자인은 20x20 영역으로 작업 (상하좌우 각각 2px 여백 필수)
  • 아이콘을 꽉 차게 하면 답답하거나 잘리는 현상 발생
  • 약간의 여백은 필수적 (모서리 절단, 계단현상 방지)

3. 터치 영역 고려 (중요)

• 아이콘 영역(24x24)은 작아서 터치 오류 빈번함
  → 잘못 눌리는 사용성 문제 발생 가능
• 이를 방지하기 위해 48x48의 터치 영역을 설정하여 디자인함
  • 아이콘 자체는 24x24, 터치 가능한 영역은 48x48
  • 아이콘 간 터치 영역이 겹치지 않도록 배치해야 함
• 실제 현업 디자이너들도 이 방식으로 터치 영역을 설정해 디자인 중
• 처음엔 48x48 터치 영역을 기준으로 작업하고, 이후 상황에 맞게 변형 가능

4. 아이콘 그리드와 키라인 (중요)

• 아이콘 그리드는 그래픽 요소의 일관적이고 유연한 위치 지정을 위해 명확한 규정을 설정하는 방식
• 키라인은 그리드의 기본 구조로, 아이콘 간 시각적 비율과 통일성을 유지하는 기준점이 됨

 

💡느낀점

강의를 통해 평소 알고 있었던 개념들이 더 구체적이고 명확한 기준으로 정리되는 느낌이었다.
특히 '밀도'나 '해상도'처럼 자주 듣지만 실제로 활용할 때는 헷갈리던 개념을 명확히 이해할 수 있어 좋았다.
레이아웃과 그리드 시스템이 왜 중요한지, 어떻게 화면의 효율성을 높이는지 구체적으로 알게 된 게 가장 큰 소득이었다.
컬러나 타이포그래피도 막연히 쓰는 게 아니라, 전략적으로 시스템화하고 관리해야 한다는 점에서 실무적으로 유용했다.
아이콘 디자인에서 터치 영역과 실제 디자인 영역의 차이를 배우면서, UX 관점에서 세부적인 배려가 얼마나 중요한지 깨달았다.

 

 

 

 

 

 

 

 

 

 

 

이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.