해상도 사례 분석

• 작성자 전혜영

 

프로젝트 작업을 진행하면서 해상도 관련하여 고민이 많았는데, 이번 과제를 통해서 얻은 정보를 공유해보고자 합니다.

 

1. Desktop : 해상도 점유율 파악하기

디바이스별 최적화를 하고 싶지만 환경이 모두 다르기 때문에 다 적용하기는 힘들기 때문에
점유율이 높은 해상도를 선택해서 진행하는게 안전하다는 생각을 했습니다.

사이트별 컨테이너 넓이를 찾은 이유는 가장 대중적으로 사용하는 사이트 기준으로
컨테이너 넓이 설정에 참고로 활용하고자 합니다.

2. Tablet : 웹에서 반응형 쿼리로 넘어가는 기준 px를 결정

디바이스 별 분기점을 어떻게 설정해야되는지 고민이 됐는데, 해상도 점유율을 보고 궁금증이 해소되는 부분이 많았습니다.
분기점 설정은 프로젝트 진행하면서 기획자가 먼저 설정해주는 경우가 많은데 그렇지 않을 경우,
먼저 의견을 낼 수 있는 부분이여서 디자인 방향성을 본인의 의도대로 끌고갈 수 있는 부분이 있기에 알아두면 유용합니다.

3. Mobile : 그리드 시스템을 참고

모바일은 데이터가 말해주듯이 각각의 비율이 편차가 없기 때문에
디자이너가 본인의 컨셉에 맞는 원하는 해상도로 작업을 진행합니다.
단, 레티나 대비해 본인이 선택한 해상도에서 2배수 작업하는 방향을 추천드립니다.

과제 진행하면서 참고했던 사이트 공유드립니다.
링크 통해서 들어가시면 더 자세한 정보 보실 수 있습니다:)

참고 사이트 : https://brunch.co.kr/@jooiway/28

디바이스별 최적화를 위해

 

추가적으로, 삼성 사이트를 기준으로 컨테이너 넓이, 폰트 사이즈, 마진 or 패딩값을 어떻게 사용했는지 분석한 자료 공유 드립니다.

 

감사합니다:-)