Wishtree를 위한 반응형 웹사이트 레퍼런스

Wishtree·2021년 5월 1일
0

인터랙티브 사이트 리서치를 진행했다. 연출력이 돋보이는 사이트들이 많았다. 그 중에서 모바일 친화도가 높은 것을 하나 꼽으라면 허프포스트에 올라온 'Millenials Are Screwed' 기사다. 팀 회의할 때에는 이 사이트를 아보카도라고 부르고 있다(썸네일이 아보카도여서).

잘 만들어진 점

  1. 모바일에서 화면을 기울여도 거의 로딩 없이 전환된다.
  2. PC 브라우저 스케일을 줄여도 자연스럽게 따라간다.
  3. 이미지들의 해상도가 높게 유지된다.
  4. 본문이 꽤 긴데도 초기 로딩이 짧다.

모바일
https://highline.huffingtonpost.com/articles/en/poor-millennials/?mobile=1

데탑
https://highline.huffingtonpost.com/articles/en/poor-millennials/

모바일 사이트의 헤더를 보면 화면 사이즈에 따라 단계별로 변하는데, 이건 반응형이다.

하지만 모바일과 데스크톱 사이트가 구분되어 있는 걸 봐서 구조적으로는 적응형 웹이다.

결국 완벽한 모바일 친화 사이트를 개발하기란 '적응vs반응 양자택일의 문제'가 아니라, '어떻게 둘의 장점을 다 녹여낼지의 문제'다.

짧은 기간 안에 반응형 웹을 개발할 수 있을지는 미지수다.
하지만 한 개의 사이트로 여러 디바이스를 커버할 수 있다는 점에서 적응형보다는 반응형을 택하는 것이 좋아보였다.
참고할 만한 문서도 적응형 개발에 관한 내용보다 반응형이 더 많다.

위 레퍼런스를 살펴보다가 희망을 하나 봤다. 모바일 사이트가 PC로도 볼만은 하다는 점이다. 그 발견을 살려서 전략을 세워봤다.

전략

  1. 스마트폰 기준으로 반응형 웹을 만든다.
  2. 이미지 해상도나 텍스트 크기 등을 PC에도 얼추 볼만하게 맞춘다.

적응형 / 반응형 고민은 차차 더 해보기로 하고, 주말 안에 패럴랙스 스크롤을 구현하는 데 초점을 맞춰봐야겠다.

profile
The interactive storytelling web service <Wishtree> is an open source project run by Team Noob. We share tips for effective non-face-to-face teamwork and service development process. Hope it helps a little to the world suffering from corona.

0개의 댓글