화면 설계할 때 가장 먼저 고려해야 하는 것들 - Web

빵을 구울 때, 가장 중요한 것은 무엇일까?

바로 '무엇을 구울까'다. 어떤 빵! 식빵, 단팥빵, 크림빵, 바게뜨... 등 빵의 종류는 너무 많다. 그럼 우린 어떤 빵을 구울지 선택에 따라 재료는 물론 반죽 방법, 발효시간, 오븐의 온도, 사용할 도구도 다 달라지기 때문이다.

 

식빵을 선택했다면, 다음은 어떤 식빵인지도 정해야 한다. 통밀 식빵, 우유 식빵, 옥수수 식빵... 빵의 종류는 너무 많다.

 

 

서비스 기획을 할 때도, 웹 기획을 할 때도 상관없이 반드시 결정해야 하는 것들이 있다.

 

우리가 만들려고 하는 것은 앱인지, 웹인지

 

앱이라면 OS는?

iOS, 안드로이드? 제 3의 무엇?

 

네이티브? 하이브리드?

 

앱은..................To be continued....

 

 

1. 웹이라면 PC, Mobile?

당연히 셋트라고 생각하겠지만 요즘 하고 있는 프로젝트는 PC만 한다.(덕분에 한동안 모바일 관점에 길들여져있던 나는 PC 관점으로 돌아가느라 애먹고 있다)

 

PC 화면을 이렇게 만드는 경우도 있다.

펫프렌즈 - pet-freinds.co.kr

 

2. 해상도는 어떤 걸 기준으로 잡아야 하는지

- 기존 사용자가 있다면, 웹로그 분석도구에서 접속 기기와 해상도를 체크

- 아니라면 아래와 같은 사이트에서 참고할 수도 있을 것이다.

 

 

Screen Resolution Stats Worldwide StatCounter Global Stats

https://gs.statcounter.com/screen-resolution-stats

Screen Resolution Stats Worldwide | StatCounter Global Stats

 

 

3. 브라우저는 어떤 브라우저를 기준으로 잡을지

특히, 한국에서 Internet Explorer는 버전까지 꼭 챙겨야 한다.  9와 10의 갭의 차이는 어마어마하고, 가급적이면 11까지만 대응하는 것을 추천한다..

 

2021.06.16 - [기획 N년차] - 제발 익스플로러 좀 버려주세요!

 

특히 퍼블리싱에서 적용안 될 수 있는 스크립트가 있기 때문에

https://caniuse.com/ 이런 사이트도 있는 거겠지.. 

Can I use... Support tables for HTML5, CSS3, etc

 

 

모바일 웹도 은근히 브라우저가 중요하다

의외로 한국인들이 많이 사용하는 브라우저 중 상위권에 있는 아이들은 네이버 인앱브라우저와, 카카오 인앱브라우저다.

 

 

왼쪽-카카오톡 인앱브라우저 / 오른쪽-네이버 인앱브라우저

웹 분석 도구(GA, 에이스카운터 등)에서는 대부분 크롬으로 잡히기 때문에 체크하기 쉽지 않지만, 또 크롬 기반의 브라우저기 때문에 크롬을 대응하면 대부분 해결이 된다. 그래도 간단한 테스트 해보는 것을 추천한다.

 

맥 OS의 사파리도 크롬과 다르게 나오는 경우가 있다. 대표적인게 폰트! 폰트때문에 당연히 라인브레이크/워드 브레이크가 다르게 나오고, 행간/자간도 조금씩 달라진다.

 

엣지, IE, 크롬, 웨일, 사파리, 파이어폭스, 삼성 인터넷(갤럭시)......

정말 많은 브라우저들이 있지만 그래도 크롬으로 대부분 해결이 되는 이슈라 하더라도 사전에 테스트 범위를 정해둘 필요가 있다. 그리고 테스트 문서 내에 브라우저도 쓸 필요가 있겠지!

 

 

 

4. 반응형 웹(디자인)과 적응형 웹(디자인)

반응형이 한 때 시장을 휩쓸었던 때가 있었지만 최근에는 다시 적응형으로 돌아오는 추세다. 

 

- 반응형 웹: 하나의 웹 화면으로 PC, Mobile, Table 등 모든 화면 사이즈에 대응하는 형태

- 적응형 웹: 기기 접속 정보를 체크하여 해당 기기에 맞는 기준 화면을 보여주는 형태

 

반응형 웹의 대표적인 사례가 유튜브, 넷플릭스 웹사이트고, 적응형 웹의 대표적인 사례가 네이버다.

 

반응형 웹과 적응형 웹에 대해서는 곧 다시 썰을 풀어보겠다. 이 글을 쓰는 것도 처음엔 반응형과 적응형을 쓰려다가 일이 커진 탓이다.

일이 커지는 짤

 

 

 

 

 

 

 

세상의 모든 기기, 브라우저를 대응할 수 있다. 시간, 돈, 사람만 있으면 가능하다.

하지만 우리는 언제나 시간과 돈과 사람이 부족하기 때문에 선택을 해야 하고, 최적의 선택/결정을 위한 데이터가 필요하다. 사용자 데이터가 있다면 그에 맞춰서 선택하면 되지만, 없다면 통계 사이트를 활용해야겠지.