중국에서 사이트가 잘 열리지 않는 이유

Section형은 필요한 기능 제공을 위해 외부 서비스를 사용하기도 합니다. 예를 들면 Google, Facebook 로그인, YouTube 및 Vimeo 영상 삽입, Instagram 갤러리와 같은 것들이 해당됩니다. 그러나 중국 당국에서 이런 서비스들의 접속을 차단하였기 때문에 관련 API 및 스크립트를 호출하는 Section형 사이트까지 접속이 지연되는 문제가 발생하는 것입니다.

중국 당국에 의해 중국 내에서 Facebook, Google, Instagram, 네이버를 비롯한 많은 소셜 미디어 들의 접속을 정치적인 이유로 차단하고 있습니다. Section형으로 개설한 사이트는 해당 기능을 사용하지 않더라도 언제든 사용할 수 있는 가능성을 위해 기본적으로 기능들을 로드하고 있기 때문에 문제가 발생하는 것입니다. 물론, 중국에서 접속 문제는 Section형으로 개설한 사이트 자체의 문제가 아닌 해당 사이트에서 불러오는 외부 서비스가 차단됨에 따른 문제입니다.

해결방법

내 사이트가 중국어로 되어 있거나 중국내에서 접속을 크게 고려하고 있다면, 다음과 같은 설정을 통해 일부 기능을 제한하면서 접속을 원활히 할 수 있습니다.

  1. 중국내에서 접속을 원활하게 할 내 사이트의 관리페이지에 접속합니다.
  2. 환경설정 > 기본설정으로 이동합니다.
  3. 중국내 접속 허용 항목에 사용을 체크합니다.
  4. 저장 버튼을 눌러 반영합니다.
중국내 접속 허용 기능 사용시 제한되는 기능

중국내 접속 허용 기능 사용시 다음과 같은 기능 및 위젯은 방문자에게 표시되지 않습니다. 대신 사이트 관리자는 디자인모드에서 중국내에서 차단된 위젯인지 확인 가능합니다. (해당되는 위젯은 왼쪽 상단에 모양의 아이콘 표시)

  • Google 로그인 및 공유
  • Facebook 로그인 및 공유
  • 네이버 로그인 및 공유
  • 네이버페이 구매
  • Instagram 연동 갤러리
  • 동영상 위젯(YouTube 및 Vimeo)
  • 다음 주소 찾기

참고 : 중국내 접속 허용 기능은 아직 Beta 기능입니다. 해당 설정 후에도 여전히 중국내에서 접속 문제가 발생할 경우 고객지원으로 알려주시면 확인 후 수정하도록 하겠습니다.

Section형은 기본적으로 이메일 형식으로 로그인을 하도록 설정됩니다. 그러나 아이디 형식으로도 로그인을 사용할 수 있으며 다음 단계를 따르면 됩니다.

  1. 사이트 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 > 가입 및 그룹설정]을 클릭해 이동합니다.
  3. 가입 폼 관리 항목에서 아이디 행의 로그인 계정 오른쪽 라디오 버튼을 클릭합니다.
  4. 저장 버튼을 클릭해 적용합니다.

참고 : 기존 이메일 형식의 가입자는 기존 계정인 이메일로만 로그인을 할 수 있으며 새로운 가입자부터 아이디 형식으로 로그인 및 가입이 가능합니다.

내 사이트에 대한 설명을 추가할 수 있습니다. 사이트 설명에 작성된 내용은 다음처럼 구글 검색결과에 표시됩니다.

변경방법

  1. 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 > 기본설정]을 클릭합니다.
  3. 사이트 설명 항목에 내 사이트에 포함하는 정보를 입력합니다. *60자 이상, 80자 이내 권장
  4. 저장 버튼을 클릭해 적용합니다.

추가 정보

사이트 이름 및 설명은 네이버, 구글 등의 검색결과에 영향을 줍니다. 

네이버 웹마스터 도구

네이버 웹마스터 도구를 사용해 네이버에 사이트를 등록하면 보다 효율적으로 네이버 검색결과에 노출 시킬 수 있습니다.

등록방법

1단계, 네이버 서치어드바이저 접속하기
  1. 네이버 서치어드바이저에 접속합니다.
  2. 오른쪽 상단 웹마스터 도구 버튼을 클릭합니다.
  3. 네이버 아이디로 로그인 합니다. *네이버 회원가입 필수
2단계, 사이트 추가하기
  1. 내 사이트 도메인을 입력합니다. 예시) http://mydomain.com
  2. 추가 버튼을 클릭합니다.
    참고 : 여러 도메인을 사용 중이라면 대표(기본) 도메인 하나만 입력합니다.
3단계, 사이트 소유 확인
  1. 사이트 소유 확인 방식을 HTML 태그로 선택합니다.
  2. 녹색 메타 태그를 복사합니다. *네이버 웹마스터 도구 창을 닫지 마세요!

4단계, 메타 태그 붙여넣기
  1. 관리자 메뉴에 접속합니다. 
  2. 왼쪽 관리 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭합니다.
  3. Meta Code 항목에 위 3단계에서 복사한 메타 태그를 붙여넣습니다.
    참고 : Header Code 란에 붙여도 작동하지만, 코드 구분을 위해 Meta Code 란에 붙여넣으실 것을 추천합니다.

  4. 저장 버튼을 클릭해 적용됩니다.
5단계, 자동 등록 방지 문자 입력
  1. 네이버 웹마스터 도구 등록 화면으로 돌아갑니다.
  2. 자동 등록 방지 문자를 입력합니다.

  3. 확인 버튼을 클릭하고 다음 단계로 넘어갑니다.
  4. 소유 확인이 완료 되었다는 창이 뜨면 확인을 클릭합니다.
6단계, 등록 완료

사이트 등록이 마무리 되었습니다. 검색 노출까지 최대 14일이 소요될 수 있습니다.

주의 : 네이버 웹마스터 도구 등록을 하여도 검색 노출 여부는 네이버가 결정합니다.


그리드 시스템 이해하기

왼쪽 이미지와 오른쪽 이미지 중 어떤 것이 정리가 잘 되어 보이고 컨텐츠가 잘 보이나요?

거의 모든 사람은 오른쪽을 택할 것입니다. 이는 간단한 그리드 시스템의 예시입니다.

그리드 시스템은 제일 처음 건축에서 개발단계에서 구획을 나눌 때 사용되었고 그후 타이포그래피에서 활용되다가 1930년경 신문잡지등에서 기사, 사진 등 각 컨텐츠등을 효율적으로 구성하기 위해 사용되었습니다.

아임웹에서도 잘 보이는 레이아웃을 쉽고 빠르게 구성할 수 있도록 그리드 시스템이 도입되었습니다. 

Setion형으로 제작된 사이트는 12칼럼 그리드 구조로 만들어지며 객체의 이동이나 크기 조정은 전체 폭의 1/12(약 8.33%) 만큼씩만 조정됩니다.

얼핏 과도하게 제한되는 것 같지만 대부분의 상황에서 적절한 레이아웃을 만들 수 있는 시스템입니다.

드래그로 이동

디자인 모드에서 가장 많이 쓰이는 것 중 하나는 마우스 드래그를 활용한 위젯 이동입니다. 위젯을 마우스로 클릭하고 드래그하여 원하는 위치로 이동을 시킬 때 사용합니다.

대상을 좌/우로 이동시키는 것 뿐 아니라 상/하로도 이동시킬 수 있습니다.

참고 : 위젯이 하나만 있는 경우 이동할 수 없습니다. 좌우로 이동할 때 같은 선상에 위젯이 하나만 있는 경우에도 이동할 수 없습니다.

드래그로 크기 조정

위젯과 위젯 사이를 드래그하면 크기를 조정할 수 있습니다.

이미지 위젯, 지도 위젯, 여백 위젯과 같은 일부 위젯은 이미지 하단 가장자리를 드래그하여 크기 조정이 가능합니다.

어떠한 크기로 조정하더라도 비율은 자동으로 유지됩니다.

참고 : 이동과 마찬가지로 좌우 크기 조정은 위젯이 단독으로 존재할 때 사용할 수 없습니다. 

하나의위젯을 단독으로 작게 표현하고자 할 땐 여백 위젯을 추가하여 조정하시면 됩니다.

수직 크기 조정은 그리드 단위가 아닌 픽셀 단위로 세밀하게 조정할 수 있습니다.


마우스 오른쪽 클릭 버튼

디자인 모드를 완벽하게 사용하려면 마우스 오른쪽 버튼을 사용하셔야 합니다. 

각 위젯이나 섹션,상단 및 하단은 마우스 오른쪽 버튼을 눌러 설정화면에 진입하거나 각종 옵션을 빠르게 수정할 수 있습니다.

참고 : 각 위젯이나 섹션 오른쪽 상단에서 ⓘ 아이콘을 눌러도 같은 효과를 낼 수 있지만 편의성 측면에서 마우스 오른쪽 버튼 사용을 권장합니다.

복사 및 붙여넣기

컴퓨터의 파일 관리자에서 파일을 복사, 붙여넣기 하듯 위젯과 섹션도 복사 및 붙여넣기가 지원됩니다. 복사를 원하는 위젯이나 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 복사를 선택하여, 같은 페이지 뿐 아니라 다른 페이지에도 붙여넣을 수 있습니다.

참고 : 복사 및 붙여넣기는 단축키로는 지원하지 않습니다.

작업 즉시 저장

디자인 모드는 대부분의 설정이 변경 즉시 저장됩니다. 따로 저장 버튼을 누르지 않아도 됩니다. 예를 들어 이미지 설명을 변경하고 닫기를 클릭하는 즉시 반영됩니다. 이는 불필요한 과정 없이 최대한 빠르게 원하는 결과물을 만들 수 있도록 의도된 것입니다.

Setion형은 반응형 웹 제작 솔루션이기 때문에 PC/태블릿/모바일 기기 해상도에 따라 이미지 크기가 달라집니다. 

따라서 명확한 이미지 크기를 명시해 드리기에 어려움이 있습니다.

다만 디자인 모드, 그리드 기준에 따른 근접한 크기를 안내해 드릴 수는 있습니다. 

아래 내용을 참조하시어 적절한 크기를 찾으시기 바랍니다.


참고 크기

  • 공통 디자인 그리드 기준 가로폭 : 1280 px
  • 가로영역 100% 확장 시(비주얼섹션, 섹션 배경 이미지) : 1920 px
  • 모바일 전용 가로 크기 : 768 px


본문폭이란?

웹 페이지 본문 영역의 가로 길이를 가리킵니다. 본문폭이 길면 사이트가 넓어 보이게 되며 반대로 짧으면 좁아지게 됩니다. 본문폭 길이는 공통 디자인 설정 메뉴에서 설정할 수 있습니다.


설정방법

  1. 디자인 모드에 접속합니다.
  2. 오른쪽 상단 톱니바퀴아이콘을 클릭합니다.
  3. 공통 디자인 설정이 나타나면, 본문 항목의 본문폭에서 길이를 조절합니다.


다음 2가지의 경우 본문폭 설정값 영향을 받지 않습니다.

  1. 위젯에 가로 영역 확장 옵션을 지정한 경우
  2. 섹션 설정에서 가로 100% 확장 옵션을 지정한 경우

사이트에 팝업을 노출할 수 있습니다. 기본 팝업과 상단 배너 중 선택할 수 있으며, 팝업의 형태, 크기, 노출할 페이지, 기간, 대상, 기기까지 다양한 옵션을 지원합니다.

주의 : 많은 팝업 배너 및 잦은 노출은 방문자의 사이트 이용에 방해가 될 수 있으므로 꼭 필요한 만큼 추가하실 것을 권장합니다.

설정방법

이 도움말에서는 기본 팝업 설정 방법에 대해 설명합니다.

  1. 관리자 메뉴에 접속합니다.
  2. 왼쪽 관리 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다.
  3. 팝업 추가 버튼을 클릭합니다.
  4. 팝업을 설정합니다. 자세한 설정 옵션은 아래 추가 도움말을 참조해주세요.
  5. 저장 버튼을 클릭합니다.
  6. 팝업/배너 관리 페이지 오른쪽 상단 사이트 확인하기를 클릭해 정상적으로 표시되는지 확인합니다.


팝업 설정 옵션


  • 제목 : 관리자용 팝업 배너 제목을 입력합니다. 회원에겐 표시되지 않습니다.
  • 기간 : 팝업이 노출되는 기간을 설정합니다.
  • 대상 기기 : 팝업이 노출될 기기를 선택합니다. 데스크톱(PC), 모바일 모두 선택할 수 있습니다.
  • 노출 페이지 : 팝업을 노출할 페이지를 선택합니다.
  • 적용 조건 : 팝업을 노출할 대상을 선택합니다. 모든 방문자 또는 회원에게만 노출할 수 있습니다.
  • 위치/형태 : 팝업의 형태 및 노출될 위치를 설정합니다. 팝업 레이어 또는 상단 배너 중 하나를 선택할 수 있습니다. 형태 설정 후에는 팝업의 위치를 지정합니다.
  • 버튼 설정 : 팝업 하단에 버튼 표시 여부를 선택합니다.
  • 우측 상단 닫기 설정 : 팝업 배너 오른쪽 상단 닫기 버튼을 설정합니다.
  • PC 팝업 위치 : PC 버전에서 노출될 팝업의 위치를 설정합니다.
  • 모바일 팝업 위치 : 모바일 기기에서 팝업의 위치를 설정합니다.
  • 이미지 : 팝업 이미지를 업로드합니다. *파일 형식 : JPG, PNG, GIF
  • 이미지 링크 : 팝업 클릭 시 이동할 페이지 주소(URL)를 입력합니다. 새 창에서 열기 선택 시 새 브라우저 탭으로 열립니다.
  • 너비 : 팝업의 너비(가로)를 PX(픽셀) 단위로 입력합니다. 너비에 따라 높이는 자동 설정됩니다.

텍스트의 줄간격은 공통 디자인 설정에서 지정한 값을 따릅니다. 공통 디자인 설정에서 지정한 줄간격은 모든 텍스트 위젯에 적용되는데, 만약 특정 텍스트 위젯의 줄간격을 변경하려는 경우 다음의 방법을 사용해 임의로 조절할 수 있습니다.

참고 : 웹사이트의 공통 텍스트 설정을 변경하려면 공통 디자인 설정 메뉴을 켜고 [텍스트 설정 > 텍스트 정의] 항목에서 수정하세요.

조절방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단 위젯 추가를 클릭합니다.
  3. 텍스트 위젯을 클릭합니다.
  4. 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 보조 메뉴에서 텍스트 설정을 클릭합니다.
  6. 객체 항목에서 줄간격 옵션을 수정합니다. 기본값은 Auto 입니다. 예를 들어 Auto를 삭제하고, 숫자 2.2를 입력할 수 있습니다.

  7. 다음은 줄간격 비교 전후 결과입니다.