본문으로 건너뛰기
08.31 ㅣ 에디터 전면 개편전체 사용자

에디터 전면 개편

상세페이지를 만드는 가장 중요한 공간, 에디터가 새로워졌습니다. 더 빠르게 작업할 수 있도록 화면과 기능을 정리했어요. 지금 작업하던 상세페이지는 그대로 열리니, 달라진 점만 확인하고 이어서 작업하세요.

한눈에 살펴보기

새로워진 에디터 화면 — 메뉴, 레이어 탭, 캔버스, 미리보기 위치
네모 친 자리나 번호에 마우스를 올리면 설명이 나와요.
  1. 1메뉴저장하기 · 버전 기록 · 텍스트 찾기 · 다크 모드 · 단축키가 여기 모였어요. 메뉴
  2. 2레이어 탭겹쳐 있는 요소를 목록에서 골라요. 이번에 새로 생겼어요. 레이어 탭
  3. 3캔버스고칠 것을 클릭하면 바로 이 자리에 툴바가 떠요. 툴바
  4. 4미리보기완성된 모습만 전체 화면으로 확인하고 그 자리에서 내려받아요. 미리보기

신규8

자동 저장과 버전 기록저장 버튼을 누르지 않아도 저장되고, 이전 저장 시점으로 되돌릴 수 있어요.
참고 가이드저장/버전관리

저장 버튼을 깜빡해도 괜찮아요. 손을 멈추고 10초가 지나면 저장되고, 계속 작업 중이어도 3분에 한 번은 저장돼요. 사진이나 페이지를 넣는 큰 변화는 바로 저장되고, 창을 닫을 때도 한 번 저장합니다.

저장 상태는 화면 맨 위에서 저장 중 · 저장됨으로 늘 확인할 수 있어요. 작업을 방해하지 않으려고 조용히 저장하기 때문에 저장됐다는 알림은 따로 뜨지 않아요. 알림은 직접 저장했을 때만 나옵니다.

[메뉴] 를 누르면 왼쪽에 저장하기·버전 기록·텍스트 찾기가 열립니다
[메뉴] 를 누르면 저장하기 · 버전 기록 · 텍스트 찾기가 열려요

한참 고치다가 처음이 나았다 싶을 때는 버전 기록을 쓰세요. 되돌리기가 방금 한 동작 하나를 취소하는 것이라면, 버전 기록은 어제 상태로 돌아가는 것에 가까워요. [메뉴] → [버전 기록 보기] 를 누르면 저장된 시점이 날짜별로 묶여 나옵니다.

오른쪽에 저장된 시점이 시간 순으로 늘어섭니다
저장된 시점이 시간 순으로 늘어서요 — 저장한 시각 · 저장한 사람 · 당시 템플릿
  • 줄마다 저장한 시각 · 저장한 사람 · 저장 당시 템플릿 이름이 보여요. 직접 저장한 줄에는 수동 저장 표시가 붙어요.
  • [복원하기] 를 누르면 되돌리기 직전 상태가 자동으로 한 번 더 저장돼요. 되돌렸다가 마음이 바뀌어도 지금 상태를 잃지 않아요.
  • 복원이 끝나면 화면 위쪽에 [복원 취소] 가 5초 동안 나와요. 잘못 되돌렸다면 이때 누르세요.
화면 위쪽에 뜨는 [복원 취소]
복원이 끝나면 화면 위쪽에 [복원 취소] 가 잠깐 나와요

저장 기록은 요금제와 상관없이 기간 제한 없이 남습니다.

그 자리에 뜨는 툴바고칠 것을 클릭하면 바로 위에 툴바가 떠요. 탭을 찾아 오갈 필요가 없어요.
참고 가이드메뉴

고칠 것을 클릭하면 바로 위에 작은 툴바가 떠요. 탭을 찾아 오갈 필요가 없어요. 사진을 클릭하면 사진용, 글자를 클릭하면 글자용, 페이지를 클릭하면 페이지용 툴바가 나옵니다.

페이지를 클릭하면 위에 뜨는 작은 메뉴
페이지를 클릭하면 위에 [페이지 편집] · 배경색 · 복제 · 삭제 · 더보기 가 떠요

페이지 툴바의 [더보기] 에는 페이지 작업이 모여 있어요.

  • 붙여넣기 — 복사해 둔 것을 이 페이지에 붙여요. 다른 페이지로 요소를 옮기려면 이 방법뿐이에요.
  • 페이지 복제 · 페이지 추가 · 페이지 삭제 · 페이지 북마크
  • 이미지 다운로드(jpg / png) — 이 페이지 한 장만 바로 받아요. 다운로드 창을 열 필요가 없어요.

배경색은 툴바의 색깔 동그라미에서 바로 바꾸고, 순서는 페이지 오른쪽의 위·아래 버튼으로 옮깁니다.

빠른 수정여러 개를 골라 색·글씨체·크기·사진을 한 번에 바꿔요.
참고 가이드정렬/배치

색을 하나씩 고치고 글씨체를 하나씩 바꾸던 일을 한 번에 끝낼 수 있어요. 빈 곳에서 마우스를 끌어 네모를 그리면 그 안에 든 것이 모두 골라지고, Shift 를 누른 채 클릭하면 하나씩 더해져요.

여러 개를 고르면 왼쪽 창에 다중 선택 일괄 수정이 나옵니다
여러 개를 고르면 왼쪽 창 아래에 다중 선택 일괄 수정이 나와요
항목무엇을 바꾸나요
색상고른 것들에 쓰인 색을 한 번에 다른 색으로
텍스트글씨체와 크기를 한꺼번에
이미지고른 사진들을 다른 사진으로
사이즈 일괄 변경가로 · 세로를 같은 크기로

확인 창 없이 바로 바뀌어요. 마음에 안 들면 ⌘Z(윈도우는 Ctrl+Z)로 되돌리면 됩니다.

색상을 고르면 확인 창 없이 고른 것들이 한꺼번에 바뀝니다
색을 고르는 즉시 고른 것들이 한꺼번에 바뀌어요

사진과 글자를 섞어서 골라도 괜찮아요. 해당되는 것에만 적용됩니다. 둘을 함께 골라 색을 바꾸면 글자 색만 바뀌고 사진은 그대로예요. 페이지를 클릭했을 때 나오는 페이지 일괄 수정을 쓰면 그 페이지 전체에 같은 방식으로 적용돼요.

그룹과 오토 레이아웃묶어서 하나처럼 다루고, 묶음 안의 간격을 알아서 지켜 줘요.
참고 가이드그룹/오토 레이아웃

두 개 이상을 고르고 [그룹화](⌘G)를 누르면 하나처럼 다뤄져요. 같이 움직이고 같이 커집니다. 묶음 안의 하나만 고치고 싶으면 더블클릭으로 들어가고, Esc 로 빠져나오세요. 종류가 달라도 되고, 묶음끼리 다시 묶는 것도 됩니다.

묶으면 아이콘이 그룹 해제로 바뀌고 간격 자동 맞춤을 쓸 수 있게 된다
여러 개를 골라 그룹으로 묶어요

묶은 다음 [오토 레이아웃] 을 켜면 그 안의 간격을 알아서 지켜 줘요. 사진 넉 장을 나란히 놓고 손으로 간격을 맞췄다고 해 볼게요. 그중 한 장을 지우면 그 자리만 뻥 뚫려서 다시 다 옮겨야 하죠. 오토 레이아웃을 켜 두면 남은 셋이 알아서 다시 줄을 섭니다.

간격 숫자를 60에서 16으로 바꾸면 묶음 안 간격이 한꺼번에 바뀐다
간격 숫자 하나만 바꾸면 묶음 안 간격이 한꺼번에 정리돼요
  • 가로 방향 · 세로 방향 중에 늘어놓을 방향을 고르세요.
  • 간격 은 안에 든 것들 사이의 거리, 여백 은 묶음 테두리와 안쪽 내용 사이의 거리예요.
  • 켜 두면 안에 있는 것을 끌어서 순서를 바꿀 수도 있어요. 옮긴 자리에 맞춰 나머지가 다시 줄을 섭니다.
움직이는 GIF편집 화면에서 재생 버튼 없이 그대로 움직여요.
참고 가이드업로드 탭

GIF를 일반 사진처럼 올리면 편집 화면에서 재생 버튼을 누르지 않아도 계속 움직여요. 업로드 창에서는 첫 장면이 멈춰 있고 우측 하단에 GIF 표시가 붙는데, 마우스를 올리면 바로 움직입니다.

왼쪽 메뉴에서 [업로드] 를 누르면 사진을 올리는 창이 열립니다
왼쪽 메뉴에서 [업로드] 를 누르면 사진을 올리는 창이 열려요
  • 쓸 수 있어요 — 크기 조절 · 자르기 · 회전 · 그림자 · 모서리 둥글게. 움직임을 살린 채로 꾸밀 수 있어요.
  • 쓸 수 없어요 — 색감 보정 · 필터 · 블렌드는 적용되지 않고, 색상 분류와 자동 재배치, 커버 지정도 안 돼요.
경고

움직임을 살려 받으려면 반드시 html 형식으로 저장하세요. jpg · png 로 받으면 첫 장면만 멈춘 사진이 됩니다.

미리보기선택 표시나 안내선 없이 완성된 모습만 전체 화면으로 봐요. 걸어 둔 링크도 실제로 열려요.
참고 가이드미리보기

맨 위 오른쪽의 [미리보기] 를 누르면 선택 표시나 안내선 없이 완성된 모습만 전체 화면으로 보여요. 내려받기 전에 여기서 확인하세요.

  • 좌우 화살표로 페이지를 넘기고, − % + 로 크게·작게 볼 수 있어요.
  • 걸어 둔 링크가 실제로 열려요. 주소를 잘못 넣지 않았는지 여기서 확인하세요.
  • 확인이 끝나면 그 자리에서 [다운로드] 로 바로 내려받아요.
미리보기 화면 — 크게·작게 보기와 바로 내려받기
미리보기 화면 — 크게·작게 보기와 바로 내려받기
다크 모드편집 화면 주변이 어두워져요. 완성된 상세페이지와 내려받는 파일에는 영향이 없어요.
참고 가이드다크모드

밤에 오래 작업하면 화면이 눈부시죠. [메뉴] → 편의 기능 → [다크 모드] 를 켜면 편집 화면 주변이 어두워져서 눈이 덜 피곤해요.

다크 모드를 켜면 편집 화면 주변이 어두워집니다
다크 모드를 켜면 편집 화면 주변이 어두워져요

화면만 어두워지고 상세페이지는 그대로예요. 완성된 상세페이지나 내려받는 파일에는 아무 영향이 없어요. 한 번 켜 두면 다음에 들어와도 켜져 있습니다.

같은 편의 기능에서 눈금자 · 안내선 · 격자도 켜고 끌 수 있어요. 눈금자에서 마우스를 끌어내면 안내선이 생기고, 안내선은 화면에서만 보이는 참고선이라 내려받는 파일에는 나오지 않아요.

눈금자·격자·안내선을 모두 켠 편집 화면
눈금자 · 격자 · 안내선을 모두 켠 편집 화면
레이어 탭겹쳐 있는 요소를 목록에서 골라 정확히 선택하고, 잠시 숨겨요.
참고 가이드레이어 탭

겹쳐 있는 요소를 목록에서 골라 정확하게 선택하고, 눈 아이콘으로 잠시 숨겨요.

개선1

세로 쓰기 · 텍스트 찾기 · 이미지 교체 · 단축키글자를 위에서 아래로 배치하고, 긴 페이지의 문구를 찾아 한 번에 바꾸고, 크기와 위치는 그대로 둔 채 사진만 갈아 끼워요.
참고 가이드단축키
  • 세로 쓰기 — 글자를 위에서 아래로 배치해요. 일본어 상세페이지에 잘 어울려요.
  • 텍스트 찾기 — [메뉴] → [텍스트 찾기] 로 긴 상세페이지의 문구를 찾아 한 번에 바꿔요.
  • 이미지 교체 — 사진을 고른 뒤 업로드 창에서 새 사진을 클릭하면 크기와 위치는 그대로 두고 사진만 바뀌어요. 상세페이지 한 개에 사진은 최대 50장까지 쓸 수 있어요.
  • 단축키 — 자주 쓰는 동작을 키보드로 바로 실행해요. 전체 목록은 [메뉴] → [단축키 보기] 에 있어요.

꼭 알아두세요

  • GIF 움직임을 살려 받으려면 html 형식으로 저장하세요. jpg · png 로 받으면 첫 장면만 멈춘 사진이 됩니다.
  • 다른 페이지로 요소를 옮기려면 붙여넣기를 쓰세요. 페이지 툴바의 [더보기] 안에 있어요.
  • 상세페이지 한 개에 사진은 최대 50장까지 쓸 수 있어요.

직접 해보기

이번 개편에서 가장 크게 달라진 건 고른 것에 따라 툴바가 바뀐다는 점이에요. 사진을 고르면 사진 도구가, 글자를 고르면 글자 도구가 그 자리에 떠요.

Edit TextPretendard23

글자 · 도형 · 사진을 눌러 보세요. 고른 것에 따라 위 툴바가 통째로 바뀌고, 색 · 크기 · 정렬 · 모서리는 실제로 동작해요.