(항해99)의 10주차 (220509-220515) WIL

개인적인 사정으로 3일동안 프로젝트에 참여하지 못하면서 일정이 매우 빠듯해졌다.

자리를 비운 사이에 중간발표가 있어 걱정했는데 다행히 다른 팀원들이 고생해 준 덕분에 잘 진행될 수 있었다. 

이번 주에 뷰 작업을 많이 진행해야 했지만 중간에 크게 공백이 생겨 작업 진행에 차질이 생겼다. 

우선 급한대로 로그인 페이지부터 뷰작업을 진행하고 있다. 

 

우리 팀은 피그마를 활용해 디자이너님과 기획회의를 함께 진행했는데, 실제로 구현해보니 많이 크다는 생각이 든다.

그래서 왜 그럴까 관련 내용을 찾아보니 다른 웹사이트에 비해 컨텐츠의 width를 많이 크게 잡은게 원인이었다.

반응형 웹을 만들기에는 시간이 부족하고, 또 화상채팅이 핵심기능인 만큼 반응형이 크게 필요치 않다고 생각해서

컨텐츠 크기를 고정하는 적응형으로 맞추고 작업을 진행했다.

그렇기 때문에 기준 크기를 잘 정해서 구상했어야 하는데 그 부분이 부족했다.

 

적응형 웹페이지를 만들 때 중요한 점은 얼마나 많은 화면에서 컨텐츠의 전체크기가 제대로 보일지 기준을 정하는 것이다.

모든 사이트의 기준 크기가 정확하게 정해져 있지 않지만,

사람들이 많이 사용하는 네이버나 구글, 우리조가 지난주에 클론코딩한 마켓컬리 등 많은 사이트에서는

1050~1130px정도의 컨텐츠 폭을 사용하는 것을 확인할 수 있었다.

기준은 유저들이 많이 사용하는 해상도를 고려하는데 국내 포털 중 점유율이 가장 높은 네이버에서는

국내 유저들 중 와이드 모니터를 사용하는 사람들의 비율이 높아짐에 맞춰 1080px에서 1130px으로 컨텐츠폭을 넓혔다.

기준이 되는 폭은 결국 사용자들의 입장을 고려해야 하는 것을 알 수 있다. 

그래서 크롬 개발자도구에서도 화면폭의 px을 기기에 따라 제공하고 있다.

 

반응형은 기준이 되는 화면크기를 여러 포인트로 나누어 정하고

그에 맞춰 컨텐츠 안에 들어가는 내용물의 배치 또는 크기 등을 각각 다르게 설정하는 디자인 방식이다.

모바일과 같은 작은 화면에서 데스크탑과 같은 큰 화면 모두를 고려할 수 있는 디자인이지만, 

아무래도 적응형보다 손이 많이 가고, 사용자 입장에서 페이지가 로딩되는데 더 오랜 시간이 필요하다.

우리서비스의 경우 적응형에 더 적합한 사이트라고 생각했고, 그에 따라 컨텐츠폭의 기준을 조금 줄이기로 결정했다.

 

---

 

https://hello-woody.tistory.com/8

웹 디자인 해상도, 적응형과 반응형 차이

https://www.samsungsds.com/kr/insights/enterprise_ux_resolution.html

[Enterprise UX] SI 프로젝트에서는 어떤 표준 해상도를 사용해야 할까?