기술력
반응형 웹 제작
RESPONSIVE WEB
태블릿과 모바일에서 읽는 순서를 PC와 따로 맞춥니다
기기마다 다른 화면
글과 사진 폭을 기기에 맞춰 옆으로 밀리지 않게 합니다
- PC
- 태블릿
- 모바일
메뉴와 터치
모바일 메뉴, 버튼 크기와 손가락으로 누르는 영역을 확인합니다
- 모바일 메뉴
- 터치 영역
- 고정 버튼
이미지와 글
사진 잘림과 글자 크기를 화면 비율에 맞춰 따로 설정합니다
- 이미지 크롭
- 줄바꿈
- 읽기 순서
실제로 만든 화면
노베릭이 직접 만든 디자인에서 그대로 캡처한 화면입니다.
CUSTOM SERVICE — 반응형 웹 제작
한 홈페이지를 PC · 태블릿 · 모바일에 맞춰 다시 배치합니다
PC, 태블릿, 모바일 화면 크기에 맞춰 콘텐츠 배치와 크기가 자동으로 바뀝니다. 아래는 실제 NOVERIQ 소개 페이지가 화면 크기에 따라 실시간으로 다시 놓이는 모습입니다.
실시간으로 보기
화면이 좁아지면 이렇게 바뀝니다
noveriq.app/about — 화면 크기 실시간 변화
넓은 화면
실제 화면 비교
같은 쪽인데 화면 크기에 따라 다르게 놓입니다
세 화면 모두 실제 NOVERIQ 소개 페이지를 기기별 논리 해상도로 그대로 불러온 결과입니다.
Desktop · 1440px
가장 넓은 여백, 통계 3열 배치
Tablet · 768px
데스크톱과 같은 칸 배치, 여백만 줄임
Mobile · 390px
통계 3열 → 1열, 좌우 분할 → 세로 통합
반응형 외에 어떤 것까지 구현 가능한지 확인해보세요.
전체 기능 보기반응형이 아니라면
PC 화면 그대로 축소된 모바일 페이지는 이런 문제가 생깁니다
글자와 버튼이 작아져 손가락으로 누르기 어려워집니다.
옆으로 밀어야 해서 내용을 온전히 보기 어려워집니다.
휴대폰으로 들어온 방문자가 가장 불편한 화면을 보게 됩니다.
검색엔진이 모바일 친화적이지 않은 페이지로 판단해 노출에도 불리합니다.