인프런 커뮤니티 질문&답변
작성한 질문수
반응형 문의
해결된 질문
작성
·
425
2
안녕하세요 범쌤님
새해복 많이 받으세요.
범쌤이 보여주신 헤더,GNB를 보다가.
반응형 이론에 대해서 궁금한게 있어서 문의드립니다.
현재 저는 고정사이즈 웹을 디자인 하고 있는데요
나중에 반응형을 할거같은데 깊이 알지 않아서 겁이납니다!
그래서 범쌤님께 조언을 구하고 싶습니다.
반응형 웹에 대하여
반응형 웹은 3가지 사이즈로 작업해야 한다. (핸드폰/타블렛/웹)
핸드폰 (360~743px)
타블렛 (744~1024px)
웹( 1025~1920px)
즉, 반응형 웹을 할때는 같은 디자인이지만, 3가지 플랫폼을 생각하여 3개로 디자인한다.
(360 한개, 1024 한개, 1920 한개)
ㄴ 최소크기를 기준으로 작업하고 크게 핀다.
ㄴ 최소 크기로 짤리면 안되는 컨텐츠를 염두하고 작업한다 (최소크기: 360,744,1025)
3개로 작업하고 개발자한테 넘기면 된다! (에셋이나 컴포넌트 사용은 공통!)여기까지가 반응형 웹 작업시, 이론으로 알고있습니다! 혹시 제가 잘못알고 있는게 있을까요
그리고 두번째 질문은
모바일은. 고정으로 작업하는걸로 알고있는데 (물론 아이폰과 안드로이드 사이즈는 다름, 기종사이즈다름) 모바일은 반응형은 없는거죠..? 궁금합니다.
질문이 많아 송구스럽습니다! 항상 감사드립니다.
답변 1
0
안녕하세요 이샘님 😀
질문 내용을 정리하면서 답변을 드리겠습니다.
Q1. 반응형 디자인 작업을 할 때 어떻게 작업해야 맞는 방향일까요?
A1. 정해진 규칙같은건 없으나 디자인이 깨지는 현상이 적게 발생하고, 개발의 공수도 덜 들어야 하기 때문에 대체적으로 각 디바이스별 최소 사이즈를 기준으로 작업을 진행합니다.
Q2. 모바일은 반응형이란 개념이 없는건가요?
A2. 웹은 크게 2가지의 형태로 작업할 수 있습니다.
반응형 웹 (하나의 웹사이트를 모든 디바이스에서 다 볼 수 있도록 구현한 사이트)
반응형 웹은 하나의 사이트 주소를 통해 모든 디바이스에서 레이아웃의 깨짐이 없이 볼 수 있는 사이트를 말합니다. 그래서 들어가는 사이트 주소도 단일 주소 입니다.
고정형 웹 (웹사이트가 하나의 해상도에 고정되어 있는 사이트)
고정형 웹은 모바일 or PC 이런식으로 해상도에 고정된 웹사이트를 의미합니다. 각각 들어가는 주소가 달라지기 때문에 다중 주소를 가지고 있습니다. 대체적으로 주소 앞에 m. 으로 시작하는 사이트들이 고정형 사이트 입니다.
네이버 PC 고정형 사이트
네이버 모바일&태블릿 고정형 사이트
인터넷이 느리던 시절엔 고정형과 반응형의 장단점 차이가 분명하게 나긴 했지만, 요즘은 크게 차이를 보이지 않고 있습니다. 그래서 대체적으로 사용자의 유입이 많은 대형 사이트가 아니라면, 유지보수와 사용자 경험이 좋은 반응형 웹을 많이 만들고 있습니다.
항상 열심히 하시는 이샘님을 응원합니다.
감사합니다 :)
주소까지 달라지는줄 몰랐습니다! 그렇군요!!
반응형 웹 열심히 공부하겠습니다!
바쁘신와중에 답변달아주셔서 너무너무너무너무 감사드립니다 ㅠㅠ!