ⓅⒶⓇⓉ ①⓪ 4주차 학습일지 첫번째 | UIUX 디자인 툴 | Chapter 6~7 정리

 

📋 오늘의 할 일 📋

💻 UIUX 디자인 툴 (Adobe XD) | Chapter 6

💻 UIUX 디자인 툴 (Adobe XD) | Chapter 7

 

 

---

 

 

💻 UIUX 디자인툴 (Adobe XD) | Chapter 6

 

⚡️디자인 시스템?

∗ 일관선 있는 디자인 경험을 사용자에게 제공하기 위함

∗ 명확한 의사소통을 위해 필요한 시스템

∗ 비용 절감과 브랜드 인지도 및 신뢰에 있어 큰 역할을 한다.

 

 

---

 

 

💻 UIUX 디자인툴 (Adobe XD) | Chapter 7

 

⚡️모바일 환경?

∗ 운영체제는 안드로이드와 ios가 전 세계의 99%를 차지하고 있다.

∗ 운영체제마다 UI컴포넌트의 종류나 표현, 사용 상황이 조금씩 다르다.

∗ 모바일이 다른 기기와 가지는 가장 큰 차이점은 이동성으로써, 이는 타이포그래피와 컬러에 큰 영향을 주게 된다.

 

⚡️디자인 랭귀지?

∗ Skeuomorphic : 현실의 개체를 디지털로 구현한 사실적이고 3차원적인 디자인

∗ Flat Design :  입체적이고 복잡한 요소를 제거하고 단순한 컬러를 통해 직관적으로 인식할 수 있게 하는 평면적인 디자인

∗ Material Design : 대표적인 안드로이드의 디자인 랭귀지. 높낮이와 질감을 적용해서 정보구조를 표현하기에 적합하다는 장점이 있다. Flat Design의 단순함을 유지하면서도 Skeuomorphic의 시각적 다양성을 추가해 사용성을 끌어올린다는 장점이 있다.

 

⚡️해상도와 밀도?

∗ 기기들마다 하드웨어 크기 차이가 많이 나지는 않으나, 해상도 차이가 많이 난다.

∗ 해상도 차이에 따라 이미지의 선명도가 결정되는데, 해상도는 가로와 세로에 몇 개의 픽셀이 있는지를 의미한다.

 

➀ Pt(포인트)

∗ ios에서 사용하는 단위.

∗ 아이폰은 레티나 디스플레이를 장착하면서부터 픽셀을 두 배로 늘려서 선명한 화면으로 출력하는 그래픽을 보여주는데, 그렇기 때문에 이전과 동일한 물리적 크기를 유지하려면 픽셀의 크기를 두 배로 크게 디자인 작업을 하여야한다.

∗ pt(point)는 절대적인 값을, px(pixel)은 상대적인 값을 나타낸다.

∗ 1pt = 레티나 디스플레이 이전의 디바이스에서 1px을 말함

∗ 즉, 각각 2x, 3x (2배수, 3배수)에 따라 1pt는 각각 2배, 3배가 된다.

∗ 최근에는 3배수를 지원하기 때문에, 3배로 생각하면 된다.

 

➁ Dp(Density-independent pixel = 덴시티)

∗ 화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 좌표 단위.

∗ 픽셀로 렌더링이 되는데, 이것을 래스터화, 래스터라이징 이라고 한다.

∗ Downsampling : 장치 화면에서 해상도가 이전 단계에서 렌더링 된 이미지보다 낮을 수 있기 때문에, 이미지의 크기를 조절한다.

 

⚡️8dp 디자인?
∗ 1x mdpi = 360*640

∗ 배수의 개념에서 필요한 hdpi 1.5 배수를 대응하지 못하는 수치 때문에 8dp를 기준으로 작업한다.

(예시로, 4배수 36px 기준으로 작업하게 되면 1.5배수가 됐을 시, 소수점으로 끝나서 반올림 되어버린다.)

∗ 8배수의 단위에 맞춰 디자인하게 되면 3배수, 2배수 각각 줄였을 때 디자인의 크기가 정수로 떨어지기 때문에 깔끔하다.

 

⚡️엘리베이션?

∗ material design은 3차원적인 특성을 반영해 그림자를 활용한 높낮이, xyz축을 사용해 정보구조를 표현한다.

∗ 그림자값을 통해 z의 높낮이가 생기는 것.

∗ 그림자의 확산, 부드러움 정도를 통해 높낮이를 조절한다.

 

⚡️컬러시스템

∗ 컬러는 시각적 연속성과 상태 정보를 제공한다.

∗ 주조색인 Primary color, 보조색 Secondary color 하나씩 택하고, 명도와 채도의 베리에이션을 통해 다양한 느낌을 줄 수 있다.

 

⚡️아이코노 그래피

∗ 시스템 아이콘과 제품 아이콘으로 나눌 수 있다.

∗ 어떤 기능을 수행하거나 안내하는 역할을 한다.

∗ 일반적으로 앱 아이콘을 디자인할 때는 4배수에서 디자인 하는 것을 권장. 

∗ 보통 시스템 아이콘이 디자인되는 크기는 24dp*24dp이며, 콘텐츠 영역은 20dp*20dp의 라이브 영역 내에 위치하여야 한다.

∗ 완성된 아이콘은 터치가 가능하도록 48dp의 터치 영역을 포함해서 구성되어야 한다. 

∗ 둥근 아이콘의 경우 모서리 반경은 최소 0dp에서 최대 4dp를 넘지 않도록 한다.