디앤
가이드

빠른 메뉴

디자인 모드는 PC버전을 제작하는 중 자동으로 모바일 버전도 구성됩니다. 이 과정에서 여러 연관된 위젯들을 적절하게 콘텐츠 단위로 묶어 배치하지 않는 경우, 모바일에서 알맞지 않은 모양 및 순서로 표시될 수 있습니다.

다음 그림은 디자인 모드에서 이미지 위젯과 텍스트 위젯을 사용해 제작한 페이지로 일견 문제가 없어 보입니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4742ba28-643f-4f8d-81f2-ba387a8e2cda/00.png

그러나 뷰포트를 모바일로 전환하면 다음처럼 순서에 맞지 않게 표시되는 걸 확인할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4574f04b-7c06-4423-a871-a9eea8aee6fb/01.png

그 이유는 PC 뷰포트에서 위젯들을 다음 그림처럼 한 줄로 배치했기 때문입니다. 한 줄에 배치한 위젯들은 그리드 시스템에 따라 모바일 화면의 부족한 너비에 자동으로 반응하여 한줄 씩 내려가게 됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/078d3c2a-cf9e-4bf5-abce-b7f5a1800069/02.png

이에 따라 사용자는 PC 뷰포트에서 위젯 배치 시 다음 그림처럼 연관된 위젯들을 하나로 묶어 배치해야 합니다.
참고: 연관 위젯들을 하나로 묶어 배치하는 방법은 아래 튜토리얼 7번 애니메이션을 참조해주세요.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f290f00e-dbec-4e60-9afa-4ece7c082b8f/03.png

이처럼 묶어 배치한 위젯들은 모바일 뷰포트 전환 시 다음처럼 묶음 단위로 한줄 씩 본문폭에 맞춰 나열됩니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbd0ad5b-cfcb-4559-b733-cf52d775fdb2/04.png

다음은 PC 뷰포트에서 배치한 위젯들을 모바일에서 정상적으로 표시되도록 배치하는 방법에 대해 튜토리얼 형식으로 설명합니다.


배치방법 예제 따라하기

세 개 칼럼으로 나눠진 위젯들이 모바일에서 적절하게 표시되려면 다음 그림처럼 기준이 되는 위젯의 위 또는 아래에 배치해야 합니다.

  1. 디자인 모드에 접속합니다. 
  2. 이미지 위젯 3개를 삽입합니다. 
  3. 이미지 위젯 하나를 마우스 클릭 후 드래그하여, 한 줄에 2개가 되도록 이동시킵니다. 
  4. 남은 이미지 위젯도 같은 방법으로 한 줄에 3개가 되도록 배치합니다. 그럼 다음 그림처럼 배치됩니다.

  5. 텍스트 위젯 3개를 추가합니다.
  6. 텍스트 위젯 하나를 마우스 클릭 후 드래그하여, 가장 왼쪽 아이콘 위젯 바로 아래로 이동시킵니다.
    참고: 텍스트 위젯이 아이콘 위젯 바로 아래 위치하는 경우 다음 그림처럼 텍스트 위젯 너비만큼 검정색 선이 표시됩니다. 이 때 마우스를 놓아주세요.

  7. 같은 방법으로 남은 2개의 텍스트 위젯들도, 아이콘 위젯 바로 아래 하나씩 배치합니다. 다음 애니메이션을 참조해 배치해보세요.

  8. 각 이미지 위젯의 설정을 열어 이미지를 추가합니다.
    참고: 이미지 크기는 각 이미지 위젯 설정에서, 높이를 똑같은 크기로 입력하므로서 모든 이미지가 같은 크기로 표시되도록 설정할 수 있습니다.

  9. 각 텍스트 위젯을 마우스 더블-클릭하여, 글자를 입력합니다.
  10. 디자인 모드 상단 중앙의 모니터 아이콘을 클릭해, 뷰포트를 모바일로 전환합니다. 
  11. 이미지와 텍스트가 의도한 순서대로 나열되는지 확인합니다.

저작권이 자유로운 수십 개의 글꼴(서체)을 제공합니다. 제작하시는 사이트 디자인 콘셉트에 따라 적절한 글꼴을 선택해 적용해보세요.


변경방법


1단계: 공통 디자인 설정 메뉴 켜기
  1. 디자인 모드에 접속합니다. 
  2. 오른쪽 상단 톱니바퀴아이콘을 클릭합니다.

2단계: 글꼴 변경하기
  1. 텍스트 항목을 찾습니다.
  2. 본문 단락제목 단락에 적용할 글꼴을 선택합니다.

    • 본문 한/중/일: 표준(Body) 단락으로 설정된 텍스트의 한/중/일 글꼴을 선택합니다.
    • 본문 영문 글꼴: 표준(Body) 단락으로 설정된 텍스트의 영문 글꼴을 선택합니다.
    • 제목 한/중/일 글꼴: 제목(Heading) 단락으로 설정된 텍스트의 한/중/일 글꼴을 선택합니다.
    • 제목 영문 글꼴: 제목(Heading) 단락으로 설정된 텍스트의 영문 글꼴을 선택합니다.
  3. 공통 디자인 설정 오른쪽 상단 닫기아이콘을 클릭하고 저장을 눌러 적용합니다.

3단계: 글꼴 적용하기
  1. 텍스트 위젯을 추가합니다. 이미 추가된 경우 건너뜁니다. 

  2. 텍스트 위젯을 마우스로 더블-클릭합니다.
  3. 변경하고 싶은 텍스트를 마우스로 드래그하여 선택합니다.
  4. 텍스트 편집도구에서 단락 아이콘을 클릭합니다.

  5. 제목(Heading) 또는 표준(Body) 중 하나를 선택합니다.

  6. 선택하신 단락 글꼴이 변경됩니다.




Google Fonts 적용방법


1단계: Google Fonts에서 글꼴 찾기
  1. Google Fonts에 접속합니다.
  2. 왼쪽 상단 검색 필드에 원하는 글꼴명을 영문으로 입력하고 Enter를 클릭해 검색합니다.
    참고: 아래 그림처럼 언어를 Korean 으로 선택하시면 검색이 더욱 빠릅니다.

  3. 마음에 드는 글꼴을 찾아 오른쪽 상단 를 클릭합니다.
  4. 브라우저 오른쪽 하단 펼침메뉴를 클릭합니다.

  5. 선택하신 웹 폰트 정보가 다음처럼 나타납니다.

    • 1) 글꼴 링크 HTML
    • 2) 불러올 글꼴 CSS

2단계: 사이트에 적용하기
  1. 새 브라우저 탭을 켭니다.
  2. 접속하고 관리자 메뉴에 접속합니다. 
  3. 왼쪽 관리 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  4. 구글 폰트 정보를 열어둔 브라우저 탭으로 이동합니다.
  5. 위 그림에서 1번 글꼴 링크 HTML 코드를 복사한 다음 Meta Code 란에 붙여넣습니다.
  6. 다음 코드를 복사해 Header Code 란에 붙여넣습니다.

    <style>
    body {
      font-family: 'Sunflower'!important;
    }
    </style>
  7. 코드 내 따옴표 사이의 폰트명(Sunflower)을 삭제하고, 위 그림 2번 따옴표 사이에 표시된 폰트명을 입력합니다.
    주의: 위 예시처럼 반드시 따옴표(' ') 사이의 글꼴명만 변경하고, 끝은 반드시 !important; 로 끝나야 합니다.
  8. 오른쪽 상단 저장을 눌러줍니다.

3단계: 적용된 글꼴 확인하기

관리자 메뉴 왼쪽 상단 미리보기 아이콘을 클릭해 구글 웹 폰트가 정상적으로 적용됐는지 확인합니다.

반응형 웹 제작 솔루션이기 때문에 PC/태블릿/모바일 기기 해상도에 따라 이미지 크기가 달라집니다. 따라서 명확한 이미지 크기를 명시해 드리기에 어려움이 있습니다.

다만, 디자인 모드의 그리드 기준에 따른 근접한 크기를 안내해 드릴 수는 있습니다. 아래 내용을 참조하여 적절한 크기를 찾아 보시길 바랍니다.

참고 크기

  • 공통 디자인 그리드 기준 본문폭: 1280 px
  • 가로 영역 확장 시: 1920 px
  • 모바일 전용 가로 크기: 768 px


위젯이 차지하는 그리드 수를 변경할 수 있습니다. 이 그리드 수를 변경함에 따라 위젯의 크기는 작아지거나 커질 수 있습니다. 예를 들어 게시판 위젯이 4칸의 그리드를 차지하는 경우 너무 작을 수 있기에, 그리드 수를 늘릴 필요가 있습니다.


조절방법

  1. 위젯을 2개 이상 추가합니다.
    참고: 위 그림에서는 이미지 위젯 3개가 사용되었습니다.
  2. 위젯과 위젯 사이 마우스 포인터를 올립니다.
  3. 마우스 커서가 화살표로 바뀌고, 검은 줄이 생겨되면 마우스를 클릭합니다.
  4. 클릭을 유지한 채로, 마우스를 왼쪽 또는 오른쪽으로 드래그합니다.
  5. 위젯이 차지하는 그리드 수가 실시간으로 변경되는 걸 확인할 수 있습니다.


위젯 추가방법


방법1: 기본 위젯 삽입하기
  1. 디자인 모드 왼쪽 상단 를 클릭합니다.

  2. 위젯 목록이 나타나면 사용할 위젯을 클릭합니다.

방법2: 특정 위치에 위젯 삽입하기
  1. 페이지의 위젯과 위젯 사이 마우스 포인터를 올리면 다음 그림처럼 위젯 추가 버튼이 생겨나면 클릭합니다.
    참고: 일반적으로 페이지 내 위젯이 이미 삽입된 경우 빠른 배치를 위해 사용합니다.

  2. 위젯 목록이 나타나면 사용할 위젯을 클릭합니다.

미리보기

사이트 제작 중 변경사항을 브라우저에서 미리 보려면 미리보기 기능을 활용해보세요.

미리보기 창을 켜서 지금까지 작업한 사항들을 언제든 미리 볼 수 있습니다.

참고: 미리보기에서 보이는 사이트는 관리자만 볼 수 있습니다.


설정방법

  1. 디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
  2. 브라우저 새 탭으로 미리보기 모드가 열립니다.
  3. 페이지를 탐색하고 확인합니다.




관련 도움말

실제 방문자들이 변경된 작업사항을 볼 수 있도록 하려면 사이트를 게시해야 합니다.


게시하기

실제 방문자들이 작업사항을 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.

디자인 모드에서 작업한 사항들을 실제 방문자들이 볼 수 있도록 웹에 반영하려면 사이트를 게시해야 합니다.


게시방법

디자인 모드 오른쪽 상단 게시하기 버튼을 클릭합니다.




주의사항

  • 한 번 게시하면 이전으로 되돌릴 수 없습니다!
  • 게시하기 전 미리보기를 통해 사이트를 확인하고 게시해주세요.
  • 만약 게시 후 잘못된 점을 발견한 경우 수정 후 다시 게시하기를 클릭합니다.


마지막 게시 시점으로 되돌리기

사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다. 사이트 게시 후 디자인 작업을 계속하다 마음에 들지 않거나, 더는 수정이 어렵다고 판단되는 경우 사용할 수 있습니다.

단, 한 번 디자인을 되돌리면 다시 현재 시점으로 되돌릴 수 없으니 주의가 필요합니다.

주의: 이 기능은 한 번 사용하면 다시는 현재 시점으로 디자인을 되돌릴 수 없습니다. 이용 전 반드시 마지막 게시한 시점을 확인하고 진행하세요.

사이트 디자인을 마지막 게시한 시점으로 되돌릴 수 있습니다.


사용방법

  1. 디자인 모드 왼쪽 상단  아이콘을 클릭합니다. (진행 전 마지막 복구시점을 확인하세요.)

  2. 경고창이 나타나면 확인을 클릭합니다.
    주의: 다시 한 번 마지막 게시 시점을 다시 한 번 확인해 주세요. 한 번 되돌리면 다시 되돌릴 수 없습니다.

  3. 마지막으로 게시한 시점으로 디자인이 변경됩니다.
감성적인 느낌이 있는 디앤퍼슨스의 디자인
웹사이트, 쇼핑몰 디자인 맞춤제작 그리고 템플릿
COPYRIGHT © 2007-2024. DNPERSONs ALL RIGHTS RESERVED.