[UI 디자인 기초] 해상도

ㅣ플러스 엑스 UI 강의 후기 07ㅣ

---

02강_02-03: 다양한 디바이스에서 해상도 정하는 기준 

요약: 환경에 따라 달라지는 해상도. 어떻게 디자인 하면 좋을까? 

 

해상도를 정하는 두가지 사항

1. 파트너사가 명확한 해상도의 기준을 제시하는 경우 

2. 플러스엑스 자율

1 의경우 파트너사가 제안한 해상도가 트렌드에 떨어지고 장점보다 단점이 많을 때, 파트너사를 설득하여 기본 해상도를 정함

 

[기준해상도 설정 방법]

- 서비스의 성격에 맞는 환경(PC,모바일)이 무엇인지 고려

ex) 회사 홍보 사이트 = pc / 이커머스 플랫폼 = 모바일

- 메인 작업이 될 플랫폼이 무엇인지 고려

웹: pc와 모바일 모두 고려 / 앱: 안드로이드, IOS 고려 

 

- 앱: 푸시알림, 런처아이콘, 위치정보, 제스쳐 기능 사용 가능/ 안드로이드와 IOS 에 최적화된 해상도로 작업. 

 

- 리소스(기간, 팀원)는 어떨게 구성되는지 고려 

 

-인터뷰 자료를 통해 키워드 탐색:

프로젝트 초기 인터뷰 키위드를 중심으로 타겟이 누구인지 상황은 어떤지 파악하고 이 타겟이 많이 쓰는 디바이스와 해상도를 기준으로 작업한다. 

 

 

' 플러스엑스 에서는'

이 기준으로 작업. 

- 안드로이드: 360x800

- IOS: 375x812

- PC 웹: 1920x1080

 

기준되는 해상도를 먼저 작업 한 후 다른 해상도에 적용. 적용 시 크기가 다르기 때문에 콘텐츠의 크기 간격을 디자이너가 손봐줘야 함. 

반응형 웹 디자인시 간격, 크기, 그리드들을 확인하여 매끄럽게 연결되는지 확인 해야 함. 

 

1. 베리에이션 작업시 구조 및 구성요소 수정 필요

2. 구성 요소 최적화를 위한 해상도 테스트를 진행

* 가변영영과 고정 영역 설정을 통한 해상도 대응 

---

 대표적으로 모바일과 PC에 UI가 표현된다.  그러나 수 많은 디바이스 크기, 해상도에 따라 디자인 해 줄 수 없는 노릇.

그래서 대표 적인 해상도를 기준으로 몇가지 베리에이션을 하고 각각의 해상도에 일관된 디자인이 될 수 있도록 세부적인 디자인 요소를 다듬어 준다. 그리고 해상도 테스트를 통해 확인 한다.  

 

---

[🌰인사이트]

● 어떤 해상도를 기준으로 만들 것인가?
- 서비스 성격에 맞는 환경 선택  고려= PC/ 모바일
- 메인 작업이 될 플랫폼이 무엇인지 고려 > 서비스 성격에 맞는 환경 선택 
- 해상도는 어떻게 지정해? > 메인 타겟의 점유율 확인, 가장 최소 사이즈 부터 작업. 

● 가변영역 지정. 해상도 테스트 
- 반응형 웹 디자인시 간격, 크기, 그리드들을 확인하여 가변영역 지점들이 매끄럽게 연결되는지 확인 해야 함. 

---

[🥜 추가조사]

픽셀 밀도

https://brunch.co.kr/@ultra0034/23

이해하기 쉬운 픽셀 밀도

---

[🌞 목표]

▶  서비스 성격에 맞는 메인 플렛폼 형태(PC,모바일)를 선택할 줄 안다. 

▶  서비스 타겟에 따라 점유도를 확인 하고 기준 해상도 사이즈를 선택할 수 있다.

▶  PC 웹  구축 시 가변영역 포인트를 지정 할 수 있고, 기변 영역이 일관된 변화가 될 수 있게 테스트할 수 있다.  

---