모바일 디자인 소개
반응형 웹사이트란, 다양한 장치의 디스플레이 크기에 대응하여 웹사이트 레이아웃, 콘텐츠 등이 최적의 형태로 제공되는 웹 기술을 말합니다. 과거에는 PC, 스마트폰, 태블릿 버전을 개별적으로 만들어야 했지만, 반응형 웹사이트의 경우 하나의 사이트만 만들면 거의 모든 기기에 알아서 대응하게 됩니다.
사용자는 PC 버전을 만들면 자동으로 모바일 버전도 제작되며, 모바일 뷰포트를 변경해 의도치 않게 구성된 디자인을 직접 변경하거나 추가하는 것도 가능합니다.
이 도움말에서는 모바일 버전 편집을 위한 뷰포트 변경 방법부터, 기본 편집 방법, 위젯 배치 방법, 모바일 상단 디자인에 관해 설명합니다.
1단계: 뷰포트 변경하기
모바일 편집을 시작하려면 가장 먼저 뷰포트를 모바일로 변경해야 합니다.
뷰포트 변경하기
2단계: 모바일 디자인 편집하기
1. 위젯 & 섹션 숨기기
모바일 버전에서 불필요하다 생각되는 위젯(들)은 숨길 수 있으며, 섹션 단위로 숨길 수도 있습니다. 불필요한 여백, 이미지, 아이콘 외 모바일에서는 적용되지 않는 설명이나 문구가 포함된 섹션은 클릭 한 번으로 간편하게 숨겨보세요. *숨긴 위젯과 섹션은 언제든 복원 가능합니다.
2. 위젯 이동하기
자동 구성된 모바일 버전의 위젯 위치가 마음에 들지 않는 경우 마우스로 드래그하여 이동시킬 수 있습니다. 단, 이 경우 인접한 요소끼리만 이동이 가능하며 모든 위치로 이동시킬 순 없습니다.
모바일 버전은 그리드 시스템에 의해 PC 버전 데이터를 기반으로 자동 구성되며, 한 줄에 1개 또는 2개의 위젯으로 표현됩니다. 예를 들어 PC 버전에서 3개의 이미지를 가로로 나열한 경우 위 그림과 같이 위젯들을 배치할 수 있는데, 이처럼 가로로 나열한 이미지들은 모바일에서 세로로 나열됩니다.
만약 PC 버전과 같이 모바일에서도 한 줄에 3개씩 나열하고 싶은 경우 위젯을 마우스로 드래그하여 배치할 수 있지만, 일정 영역 바깥으로는 이동시킬 수 없습니다.
모바일에서 자동 변환되는 구성에 대해서는 다음 모바일 버전 위젯 배치 방법 도움말에서 상세히 알아볼 수 있습니다.
모바일 편집은 가급적 PC구성을 완료한 후 진행하실 것을 권장합니다. 만약 PC 버전 제작 중, 모바일 버전을 편집하는 경우 위와 같은 모바일 맞춤 구성 초기화 경고가 나타날 수 있습니다.
만약 경고를 무시하고 확인 버튼을 클릭하는 경우 작업하신 모바일 디자인이 초기화될 수 있으므로 주의해주세요.
3. 모바일 전용 섹션 활용하기
PC에서는 표시되지 않으면서, 모바일에서만 보이는 모바일 전용 섹션을 추가할 수 있습니다. 이 모바일 전용 섹션에는 직접 위젯을 추가할 수 있으며, 이동도 비교적 자유롭습니다. 모바일 전용 섹션은 PC 버전과는 전혀 다른 레이아웃이나 콘텐츠를 추가하거나, 기능을 구현할 때 사용합니다.
예를 들어 PC 버전의 상담신청 버튼을 클릭하면 게시판으로 이동하지만, 모바일 전용 섹션에 삽입된 버튼을 클릭하는 경우 전화걸기가 작동되도록 설정할 수 있습니다.
모바일 전용 섹션 활용하기
참고: 모바일 전용 섹션의 경우 PC 버전을 편집하더라도 모바일 맞춤 구성이 초기화 되지 않습니다.
3단계: 모바일 상단 편집하기
모바일은 세로 방향으로 볼 때 가로폭이 크게 좁아지는 만큼, PC 버전과 다르게 사이트 상단 영역을 간소화 시키는 것이 좋습니다. 디자인 모드 상단 설정을 통해 모바일 상단을 수정해보세요.
모바일 상단 편집하기
모바일 디자인 소개
반응형 웹사이트란, 다양한 장치의 디스플레이 크기에 대응하여 웹사이트 레이아웃, 콘텐츠 등이 최적의 형태로 제공되는 웹 기술을 말합니다. 과거에는 PC, 스마트폰, 태블릿 버전을 개별적으로 만들어야 했지만, 반응형 웹사이트의 경우 하나의 사이트만 만들면 거의 모든 기기에 알아서 대응하게 됩니다.
사용자는 PC 버전을 만들면 자동으로 모바일 버전도 제작되며, 모바일 뷰포트를 변경해 의도치 않게 구성된 디자인을 직접 변경하거나 추가하는 것도 가능합니다.
이 도움말에서는 모바일 버전 편집을 위한 뷰포트 변경 방법부터, 기본 편집 방법, 위젯 배치 방법, 모바일 상단 디자인에 관해 설명합니다.
1단계: 뷰포트 변경하기
모바일 편집을 시작하려면 가장 먼저 뷰포트를 모바일로 변경해야 합니다.
뷰포트 변경하기
2단계: 모바일 디자인 편집하기
1. 위젯 & 섹션 숨기기
모바일 버전에서 불필요하다 생각되는 위젯(들)은 숨길 수 있으며, 섹션 단위로 숨길 수도 있습니다. 불필요한 여백, 이미지, 아이콘 외 모바일에서는 적용되지 않는 설명이나 문구가 포함된 섹션은 클릭 한 번으로 간편하게 숨겨보세요. *숨긴 위젯과 섹션은 언제든 복원 가능합니다.
2. 위젯 이동하기
자동 구성된 모바일 버전의 위젯 위치가 마음에 들지 않는 경우 마우스로 드래그하여 이동시킬 수 있습니다. 단, 이 경우 인접한 요소끼리만 이동이 가능하며 모든 위치로 이동시킬 순 없습니다.
모바일 버전은 그리드 시스템에 의해 PC 버전 데이터를 기반으로 자동 구성되며, 한 줄에 1개 또는 2개의 위젯으로 표현됩니다. 예를 들어 PC 버전에서 3개의 이미지를 가로로 나열한 경우 위 그림과 같이 위젯들을 배치할 수 있는데, 이처럼 가로로 나열한 이미지들은 모바일에서 세로로 나열됩니다.
만약 PC 버전과 같이 모바일에서도 한 줄에 3개씩 나열하고 싶은 경우 위젯을 마우스로 드래그하여 배치할 수 있지만, 일정 영역 바깥으로는 이동시킬 수 없습니다.
모바일에서 자동 변환되는 구성에 대해서는 다음 모바일 버전 위젯 배치 방법 도움말에서 상세히 알아볼 수 있습니다.
모바일 편집은 가급적 PC구성을 완료한 후 진행하실 것을 권장합니다. 만약 PC 버전 제작 중, 모바일 버전을 편집하는 경우 위와 같은 모바일 맞춤 구성 초기화 경고가 나타날 수 있습니다.
만약 경고를 무시하고 확인 버튼을 클릭하는 경우 작업하신 모바일 디자인이 초기화될 수 있으므로 주의해주세요.
3. 모바일 전용 섹션 활용하기
PC에서는 표시되지 않으면서, 모바일에서만 보이는 모바일 전용 섹션을 추가할 수 있습니다. 이 모바일 전용 섹션에는 직접 위젯을 추가할 수 있으며, 이동도 비교적 자유롭습니다. 모바일 전용 섹션은 PC 버전과는 전혀 다른 레이아웃이나 콘텐츠를 추가하거나, 기능을 구현할 때 사용합니다.
예를 들어 PC 버전의 상담신청 버튼을 클릭하면 게시판으로 이동하지만, 모바일 전용 섹션에 삽입된 버튼을 클릭하는 경우 전화걸기가 작동되도록 설정할 수 있습니다.
모바일 전용 섹션 활용하기
참고: 모바일 전용 섹션의 경우 PC 버전을 편집하더라도 모바일 맞춤 구성이 초기화 되지 않습니다.
3단계: 모바일 상단 편집하기
모바일은 세로 방향으로 볼 때 가로폭이 크게 좁아지는 만큼, PC 버전과 다르게 사이트 상단 영역을 간소화 시키는 것이 좋습니다. 디자인 모드 상단 설정을 통해 모바일 상단을 수정해보세요.
모바일 상단 편집하기