위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

관리자페이지

가이드 255

포마이샵은 저작권이 자유로운 수십 개의 글꼴(서체)을 제공합니다.

제작하시는 사이트 디자인 콘셉트에 따라 적절한 글꼴을 선택해 적용해보세요.


글꼴 변경방법

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

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

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

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

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

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

같은 폰트가 사용된 페이지를 서로 다른 브라우저에서 확인했을 때 민감한 분이라면 차이를 느낄 수 있습니다.

하지만 이는 폰트가 잘못 적용된 것이 아닌, 브라우저나 운영체제에 따라 폰트를 표현하는 방식이 달라 차이가 발생하는 것입니다.


브라우저별 폰트 랜더링 차이

위 이미지는 Google Fonts - Roboto 에서 폰트 크기를 13px로 조정한 상태에서 캡쳐한 것입니다.

보시다시피 같은 폰트임에도 브라우저나 심지어 같은 브라우저라도 운영체제에 따라서 미묘하게 다른 형태로 표현되는 것을 확인할 수 있습니다.


폰트 랜더링 차이는 조정이 어렵습니다.

웹사이트 운영자는 브라우저마다 폰트가 다르게 표현되는 것을 원치 않을 수 있습니다.

하지만 운영체제 및 브라우저 차원의 문제이기 때문에 웹페이지의 언어로는 제어가 불가합니다.

일부 CSS의 마크업(예: -webkit-font-smoothing: antialiased)으로 글꼴을 조금 더 부드럽게 하는 등의 조정이 가능하지만,

근본적으로 같은 랜더링으로 표현하는 것은 불가능합니다.


대신 줄바꿈이나 줄간격 차이를 고려합니다.

폰트 랜더링을 바꾸는 것은 불가하기 때문에 폰트 랜더링 차이에 의해 발생하는 글꼴의 크기(폭, 높이)차로 인한 줄바꿈 현상을 방지하는데 더 신경을 써야 합니다.

예를들어 텍스트가 들어갈 공간이 텍스트의 길이와 딱 맞게 표현되고 있다면, 어떤 브라우저에서는 공간이 충분하지 않아 의도치 않은 텍스트 줄바꿈이 발생할 수 있습니다. 

따라서 텍스트가 삽입될 공간을 텍스트 길이보다 충분히 확보해 놓는 것이 바람직 합니다.

구매하기 버튼, 글쓰기 버튼의 색상을 강조하여 다르게 지정할 수 있습니다. 

다음 절차에 따라 강조 버튼을 활성화 하고 디자인합니다.


설정방법

  1. 위 1~5번 절차에 따라 버튼 스타일 메뉴로 이동합니다.
  2. 강조 버튼 탭을 클릭합니다.

  3. 강조 버튼 사용자 정의를 선택합니다.
  4. 기본 버튼과 롤오버 버튼 스타일을 수정합니다. 주의 : 강조 버튼 사용 시 위 공통 버튼 스타일과는 다른 색상으로 지정하시는 걸 추천합니다.

  5. 공통 디자인 설정 바깥 영역을 클릭하고 저장을 눌러줍니다.

입력폼, 검색, 주문 등 입력이 필요한 위젯, 페이지의 입력 필드 모양을 바꿀 수 있습니다.

참고 : 일부 상황(로그인, 회원가입)에서는 입력스타일이 반영되지 않습니다.


변경방법

  1. 디자인 모드에 접속합니다.
  2. 오른쪽 상단 톱니바퀴 아이콘을 클릭해 공통 디자인 설정을 켭니다.
  3. 구성요소 항목에서 입력 필드를 클릭합니다.

  4. 입력 필드 스타일을 클릭하면 다음 중 하나의 스타일을 선택합니다.

  5. (선택 사항) 배경색, 글자색, 선색을 수정합니다.
    참고 : 입력 필드 스타일에 따라 옵션은 달라질 수 있습니다.
  6. 공통 디자인 설정 바깥 영역을 마우스로 클릭합니다.
  7. 경고창이 나타나면 저장을 눌러줍니다.

PC 버전을 제작하면 모바일 버전도 자동으로 제작됩니다.

하지만 자동으로 만들어진 결과물이 모두 마음에 들지 않을 수 있습니다.

뷰포트를 모바일로 변경하고 모바일 디자인을 편집해보세요.

모바일 디자인을 변경하려면 먼저 뷰포트를 PC에서 모바일로 변경해야 합니다.


뷰포트 변경 방법

  1. 디자인 모드 중앙 상단에 위치한 모니터 아이콘을 클릭합니다.

  2. 모바일을 선택합니다.


뷰포트를 PC로 되돌리려면?

위 2단계에서 PC를 선택합니다.

모바일 뷰포트 소개

PC 버전을 제작하면 모바일 버전도 자동으로 제작됩니다.

하지만 자동으로 만들어진 결과물이 모두 마음에 들지 않을 수 있습니다.

뷰포트를 모바일로 변경하고 모바일 디자인을 편집해보세요.


모바일 편집 진입 방법

  1. 디자인 모드 상단 중앙부에 위치한 모니터 아이콘을 클릭합니다.
  2. 모바일을 선택합니다.

  3. (선택 사항) 다시 PC 모드로 돌아가려면 1단계를 반복하고 PC를 선택합니다.


모바일에서 위젯 숨기기

모바일에서 불필요한 요소는 숨김 처리할 수 있습니다. (예: 여백, 게시판 상단 비주얼 이미지 등)

  1. 모바일에서 숨기려는 위젯에 마우스 커서를 올립니다.
  2. 위젯의 오른쪽 상단에 눈 모양의 아이콘을 클릭합니다.
  3. 위젯이 모바일에서만 사라진 걸 확인합니다.


모바일에서 숨긴 위젯 복원

숨겨진 위젯은 언제든지 복원할 수 있습니다.

  1. 위젯을 숨기면 위 이미지처럼 숨긴 위젯의 수가 물방울 아이콘에 표시됩니다.
  2. 이 아이콘을 클릭하면 오른쪽에 숨긴 위젯 목록창이 열립니다.
  3. 복원하려는 위젯을 클릭합니다.



모바일 위젯 이동하기

그리드 시스템에 의해 모바일에서는 한 줄에 한개 또는 두 개로 텍스트나 이미지 위젯들이 표현됩니다.

PC에서 아래와 같이 3개의 이미지를 가로로 나열했을 때 자동으로 아래와 같이 모바일이 구성됩니다.

만약 한 줄에 하나씩 표현되지 않고 PC에서 처럼 한 줄에 3개씩 표현하길 원한다면 PC 디자인 모드에서 위젯을 이동하듯 드래그하여 배치합니다.

참고 :모든 위젯을 모든 위치로 이동할 수는 없습니다. 위젯은 인접한 요소끼리만 이동이 가능합니다.

주의: 모바일 편집은 PC구성을 모두 완료한 후 진행하시는 것이 좋습니다.

모바일 이동 및 숨기기가 적용된 페이지의 섹션내 위젯을 PC 편집모드에서 이동이나 삭제를 할 때 아래와 같은 경고가 나타납니다. 

확인을 누르면 모바일에서 편집했던 사항들이 모두 초기화 되므로 다시 모바일 편집을 해야 할 수 있습니다.


모바일 전용 섹션 활용하기

PC에서는 보이지 않고 모바일에서만 보이는 모바일 전용 섹션을 추가하고 위젯을 추가할 수 있습니다.

모바일에서 PC와 전혀 다른 레이아웃이나 콘텐츠를 표현하고자 할 때 사용합니다.

모바일 전용 섹션은 모바일 이동 및 숨기기와 달리 나중에 PC를 편집하더라도 초기화 되지 않습니다.

  1. 뷰포트를 모바일로 전환합니다.
  2. 위젯이 없는 영역에 마우스 오른쪽 버튼을 클릭합니다.
  3. 보조 메뉴가 나타나면 모바일 전용 섹션추가를 클릭합니다.

PC에서는 PC홈페이지처럼 보여지나 모바일에서는 모바일 형태로 보여지기를 원하는 경우가 있습니다.
이런 경우 모바일 뷰포트 기능을 이용해 작업할 수 있습니다.

- 뷰포트를 활용해 모바일 버전 꾸미기

① 뷰포트를 모바일로 변경합니다.  

② PC에서 이미 디자인한 영역은 눈 가리기를 통해 숨깁니다.

①-② 모바일 전용 섹션 추가를 통해 섹션 영역을 추가하여 이미지 맵 위젯을 추가합니다.


마우스 우클릭을 통해 이미지 맵 설정으로 접속
① 미리 작업한 이미지를 업로드합니다.
② [추가] 버튼을 통해 링크를 연결합니다.
③ [추가] 버튼시 생성된 링크 박스를 링크 항목에 맞는 영역에 위치합니다.

모든 작업이 끝났다면 [게시하기]를 누릅니다.

실제 모바일 버전에서 확인한 모습입니다.(가로 100% 확장 설정을 해주시면 꽉찬 화면으로 확인할 수 있습니다.)

PC 버전을 제작하면 모바일 버전도 자동으로 제작됩니다. 

하지만 자동으로 만들어진 결과물이 모두 마음에 들지 않을 수 있습니다.

뷰포트를 모바일로 변경하고 모바일 디자인을 편집해보세요.

모바일 디자인을 변경하려면 먼저 뷰포트를 PC에서 모바일로 변경해야 합니다.


모바일 변경 방법

  1. 디자인 모드 중앙 상단에 위치한 모니터 아이콘을 클릭합니다.

  2. 모바일을 선택합니다.

뷰포트를 PC로 되돌리려면?

위 2단계에서 PC를 선택합니다.

비주얼 섹션에 삽입한 배경 이미지는 구조 상 컨텐츠(글, 버튼, 이미지)가 아닌 배경으로 처리되어, 브라우저 크기를 늘리거나 줄이는 경우 일부가 잘려 보일 수 있습니다.

모바일의 경우 PC 대비 가로폭이 더 크게 좁아지는데, 이런 경우 PC 버전에서 제작한 비주얼 섹션은 숨기고, 모바일 전용 비주얼 섹션을 만들어 사용할 수 있습니다.


모바일용 비주얼 섹션 만들기

1단계, 뷰포트 모바일로 변경합니다.
2단계, PC 버전 비주얼 섹션을 숨김 처리합니다.
3단계, 모바일 전용 섹션을 추가합니다.
4단계, 비주얼 섹션을 추가해 모바일에 맞게 컨텐츠를 추가합니다.

모바일 전용 상단 디자인을 편집할 수 있습니다.


편집방법


1단계, 뷰포트 변경하기
  1. 디자인 모드에 진입합니다.
  2. 상단 설정에 진입합니다.
  3. 뷰포트를 모바일로 변경합니다. 

2단계, 모바일 상단 꾸미기
  1. 모바일 상단에 마우스 커서를 올립니다.
  2. 위젯 추가 버튼이 나타나면 클릭합니다.
  3. 상단 전용 위젯 중 하나를 클릭합니다.
  4. PC 버전과 같은 방법으로 위젯을 이동합니다. 
  5. 위젯에 마우스 오른쪽 버튼을 눌러 설정을 변경합니다. 
  6. (선택 사항) 빈 섹션을 추가하거나 섹션 고정 등 기능을 사용해 나만의 모바일 상단을 디자인 합니다.


참고사항

모바일 상단 작업 시 위젯 또는 콘텐츠를 과하게 추가하지마세요. 

모바일 기기는 PC 대비 화면이 작아, 사용자는 메뉴 보기, 버튼 터치, 콘텐츠 읽기에 어려움이 있을 수 있습니다.

INFORMATION


상호명 : (주)위멘토


사업자등록번호 : 506-87-00931

통신판매업번호 : 제2022-서울강서-1096호 

고객센터 : 1800-2142 ∣ 이메일 : sales@wemento.kr

대표자 : 김성진 ∣ 개인정보책임자 :김성진

주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

호스팅주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi