Designer

Designer 시작하기

이 문서는 번역본입니다. 영어 버전이 기준이며, 의문이 생길 경우 영어 버전이 우선합니다.

Magnific의 그래픽 디자인 에디터입니다. 텍스트, 이미지, 벡터 요소, AI 툴을 조합하여 다중 페이지 디자인을 구성하고, 어디서든 바로 사용할 수 있는 PNG, JPEG, WebP 또는 PDF 에셋으로 결과물을 만들어 보세요.

이 문서는 Designer를 시작하기 위한 가이드입니다. Designer의 정의, 실행 방법, 작업 공간 레이아웃, 컨텍스트 인스펙터 활용법을 다룹니다. 이 글을 읽고 나면 필요한 기능을 찾는 방법과 다음 단계로 나아갈 심화 가이드를 확인할 수 있습니다.

이전 Designer를 사용하셨나요? magnific.com/designer에서 Magnific Designer를 사용해 보셨다면, 지금 사용할 에디터는 처음부터 완전히 새로 구축된 차세대 버전입니다. 계속하기 전에 이전 Designer에서 마이그레이션하기 가이드를 먼저 확인해 보세요.

이 문서의 내용

• Designer란 무엇인가

• Designer를 실행하는 두 가지 방법

• 활용 방법

• 2분 만에 완성하는 첫 디자인

• 워크스페이스: 7개의 영역

• 인스펙터: 상황별 속성

• 저장, 공유 및 협업

• 워크스페이스의 적응 방식

• 용어 정리

• 다음 단계

Designer란 무엇인가

Designer는 세 가지 핵심 아이디어를 바탕으로 구축되었어요:

• 완벽하게 제어하는 캔버스. 페이지, 레이어, 타이포그래피, 색상, 효과, 배치를 모두 직접 편집할 수 있어요. 템플릿에 갇혀 있는 요소는 없어요

• 선택한 요소에만 적용되는 AI. 자동 레이어, 자동 크기 조절, 에이전트에게 질문하기와 같은 툴은 선택한 특정 요소에만 작동하므로 전체를 다시 생성할 필요 없이 디자인의 일부만 수정하며 반복할 수 있어요

• 워크플로와 연결 가능. Spaces 워크플로 내에서 Designer를 열면 다른 워크플로 노드의 아웃풋을 받아 캔버스의 플레이스 홀더에 바인딩할 수 있어요. 이를 통해 디자인을 재사용 가능하고 자동화된 템플릿으로 만들 수 있죠

Designer를 여는 두 가지 방법

Designer는 두 곳에서 실행돼요. 엔진은 같지만 진입점이 달라요

Spaces 워크플로 내의 노드로 사용

Spaces 워크플로에 Designer 노드를 추가하면, 연결된 업스트림 노드와 캔버스가 연결된 상태로 에디터가 열려요. 해당 노드에서 생성된 이미지와 텍스트 아웃풋은 캔버스의 이미지 및 텍스트 플레이스 홀더에 드래그 앤 드롭할 수 있는 연결 형태로 나타나요. 연결을 플레이스 홀더에 링크하면 해당 요소는 동적 콘텐츠가 되어, 워크플로 인풋이 변경될 때마다 자동으로 다시 렌더링돼요

다음과 같은 경우 Designer를 노드로 사용해 보세요:

• 생성 노드에서 나온 이미지, 텍스트 노드에서 나온 캡션, 자동 레이어 작업 결과물 등 업스트림에서 생성된 콘텐츠에 디자인이 의존하는 경우

• 인풋이 변경될 때마다 동일한 디자인을 다시 렌더링하고 싶은 경우

• 디자인이 최종 결과물인 더 큰 자동화 프로세스의 일부인 경우

Magnific Spaces의 Designer 노드: 왼쪽에는 인풋 노드(사진, 제목, 부제목), 중앙에는 Designer 노드, 오른쪽에는 처리된 모든 디자인 페이지가 포함된 리스트 노드가 있어요

독립형 툴로 사용하기

/app/tools/design에서 동일한 편집기가 독립형 모드로 열려요. 상위 워크플로나 연결 없이 자유롭게 디자인할 수 있어요. 같은 제품군에서 Designer 엔진을 기반으로 하는 다른 독립형 툴도 실행할 수 있어요. 자동 레이어는 이미지를 편집 가능한 디자인으로 바꿔줘요. 자동 크기 조절은 디자인을 여러 종횡비로 리프레임해요. 템플릿 탐색기에서는 완성된 디자인들을 둘러볼 수 있어요

다음과 같은 경우 Designer를 독립형으로 사용해 보세요:

• 처음부터 새로 디자인을 시작하거나 템플릿을 활용할 때

• 이미지를 가져와 자동 레이어로 편집 가능한 레이어로 분해하고 싶을 때

• 기존 디자인을 활용해 자동 크기 조절로 배포할 모든 소셜 미디어 규격에 맞는 변형을 만들고 싶을 때

Magnific의 툴 메뉴(디자인 탭)에서 Designer를 열어 기존 컬렉션의 페이지로 디자인을 만들어 보세요

독립형 화면은 Magnific 내 다른 곳에서 생성된 딥링크의 목적지이기도 해요. 예를 들어, 미디어 뷰어에서 생성된 이미지를 Designer로 열 때 사용해요

미디어 뷰어의 작업 메뉴에서 "Designer에서 열기" 옵션을 선택해 Magnific에서 Designer로 생성된 이미지를 열어 보세요

활용 방법

Designer에서 현재 제공하는 기능의 일부입니다. 각 영역에 대한 상세 가이드는 Designer 카테고리에서 확인할 수 있어요

문서 및 레이아웃

• 페이지별로 독립적인 크기와 단위를 설정할 수 있는 다중 페이지 문서

• 레이어, 그룹, 다중 선택, 정렬 및 배치

콘텐츠

• 완벽한 타이포그래피 제어와 엄선된 폰트 라이브러리

• 도형 및 벡터 편집

• 마스크, 크기 조절, 콘텐츠 채우기 모드를 지원하는 이미지 요소

• 밝기, 대비, 노출, 하이라이트, 그림자, 채도, 온도, 선명도 등을 포함한 프로 수준의 이미지 조정 및 효과

캔버스 위에서 활용하는 AI

• AI 편집, 레이어화, 자동 크기 조절, 에이전트를 활용해 보세요. 각 기능은 선택한 요소에 적용됩니다

템플릿 및 재사용

• 템플릿으로 시작하고 디자인을 저장해 필요할 때마다 다시 사용해 보세요. Spaces에서도 활용할 수 있습니다

Spaces 연동

• 연결과 플레이스 홀더를 통해 워크플로 노드에서 콘텐츠를 받아보세요

지속성 및 협업

• 수동 버전 기록을 포함한 자동 저장

• 단일 편집자 잠금 기능이 포함된 실시간 다중 사용자 뷰

전달

• 요소별 내보내기 설정, 4가지 형식(PNG, JPEG, WebP, PDF), 사용자 지정 배율 및 이름 지정

2분 만에 완성하는 첫 번째 디자인

처음 Designer를 사용하는 분들을 위한 간결한 워크플로:

1. Designer 열기

   /app/tools/design에서 Designer를 열거나, Spaces 워크플로에 Designer 노드를 추가해 보세요

2. 시작점 선택하기

   템플릿 탭에서 빈 페이지를 선택하거나 Instagram 게시물, 스토리, 명함, 포스터와 같은 추천 형식 중 하나를 선택해 보세요

3. 콘텐츠 추가하기

   왼쪽 사이드바를 사용하여 캔버스에 요소나 이미지를 추가해 보세요

4. 요소 편집하기

   요소를 선택하면 오른쪽에 있는 인스펙터 패널이 열려요

5. 내보내기

   헤더 섹션에서 내보내기를 클릭하세요. 개별 에셋이나 전체 페이지를 내보낼 수 있어요

Spaces 워크플로에서 Designer를 열었다면 사이드바에 워크플로에서 사용할 수 있는 연결을 나열한 인풋 탭이 표시돼요. 연결을 드래그하여 일치하는 플레이스 홀더에 놓으면 바인딩할 수 있어요

Designer에서 디자인을 편집하고 사용자 지정해 보세요. 시각 효과를 적용하고, 크기를 조절하며, 인풋 노드를 통해 연결된 이미지와 텍스트를 활용할 수 있어요

워크스페이스: 7개의 영역

Designer 워크스페이스는 중앙의 캔버스를 중심으로 구성돼요. 나머지 영역은 캔버스로 콘텐츠를 전달하거나, 선택한 요소를 구성하거나, 최종 결과물을 내보내는 역할을 해요. 7개 영역의 이름을 익히면 어떤 기능이든 빠르게 찾을 수 있어요

1. 캔버스

캔버스는 페이지가 위치하는 작업 영역이에요. 다음 기능을 지원해요:

• 다중 페이지 문서. 각 페이지는 고유한 크기와 단위를 가지며, 페이지 사이에 약간의 간격을 두고 수직으로 배치돼요. 페이지 사이를 자유롭게 이동할 수 있어요

• 직접 조작. 클릭하여 선택하고, 드래그하여 이동하며, 핸들로 크기를 조절하고, 모서리 핸들로 회전해 보세요

• 팬 및 줌. 스페이스 바를 누른 채 팬을 사용하고, 스크롤 휠이나 핀치 동작으로 줌을 조절해 보세요. 푸터에서 현재 줌 레벨을 확인하고 페이지 맞춤 기능을 이용할 수 있어요

• 툴 오버레이. 일부 툴은 캔버스 위에 오버레이를 그려요. 예를 들어, 페이지 생성 툴은 드래그하는 동안 크기 조절 사각형을 보여주고, 도형 툴은 드로잉하는 동안 미리 보기를 제공해요

2. 왼쪽 사이드바

왼쪽 사이드바에는 콘텐츠를 캔버스로 가져오는 탭들이 있어요

각 Tab은 사이드바를 차지하는 패널을 엽니다. 패널에서 이미지와 같은 결과물을 선택하면 캔버스 위로 배치되고 해당 항목이 선택됩니다

3. 툴바

툴바는 캔버스 왼쪽 영역에 고정된 바입니다. 드로잉 및 조작 툴들과 함께 실행 취소 및 다시 실행 기능을 빠르게 이용할 수 있습니다. 툴들은 다음 순서로 나타납니다:

4. 상단 바

상단 바는 캔버스에서 요소를 선택할 때 해당 요소 바로 위에 나타나는 플로팅 바예요. 선택한 요소 유형에 맞는 빠른 실행 액션을 제공해요. 예를 들어 이미지를 선택하면 질문하기, 자동 크기 조절, 자동 레이어와 같은 옵션이 표시돼요. 아무것도 선택하지 않으면 사라져요

5. 인스펙터

인스펙터는 툴바와 유사하지만 더 상세한 정보를 다뤄요. 툴바가 빠른 제어 기능을 제공한다면, 인스펙터는 선택한 요소의 전체 속성 목록을 보여주며 선택 항목에 따라 내용을 전환해요. 다음 섹션에서 8가지 인스펙터 뷰를 모두 살펴볼 거예요

Magnific의 Designer 인터페이스 맵으로, 왼쪽 사이드바, 툴바, 상단 바, 캔버스, 인스펙터의 5개 섹션을 강조하고 있어요

6. 헤더

헤더는 작업 공간 상단에 위치해요. 이곳에서 다음 작업을 할 수 있어요:

• 프로젝트 제목 변경

• 버전 기록 확인

• 에셋 또는 페이지 내보내기

• 기존 템플릿이나 프리셋으로 새로운 디자인을 시작해 보세요

• 에이전트 접속하기

• 자동 저장 상태 확인하기: 저장됨, 저장 중, 또는 저장되지 않음

7. 푸터

푸터는 캔버스 하단에 있는 얇은 영역이에요. 현재 확대/축소 수준을 보여주며, 확대, 축소, 페이지에 맞춤, 선택 영역에 맞춤 기능을 빠르게 실행할 수 있어요

Magnific의 Designer 인터페이스 추가 섹션: 헤더, 바로가기, 푸터

인스펙터: 상황별 속성

인스펙터는 작업 영역 오른쪽에 있는 패널이에요. 상황에 따라 내용이 바뀌는데, 현재 선택한 항목에 맞춰 자동으로 조정되죠. 그래서 같은 패널이라도 문서 설정이 보였다가 바로 요소별 이미지 속성이 나타나기도 해요. 지금 어떤 뷰를 보고 있는지 파악하는 것이 원하는 컨트롤을 가장 빠르게 찾는 방법이에요

툴바는 가장 자주 사용하는 동작을 위한 바로가기 행으로, 인스펙터는 전체 속성 시트로 생각하면 돼요. 인스펙터는 선택 항목에 따라 8가지 뷰로 전환돼요

1. 선택 항목 없음 (문서 설정)

빈 캔버스 영역을 클릭하거나 Escape 키를 눌러 모든 선택을 해제하면 인스펙터가 문서 설정으로 돌아갑니다. 이곳에서 특정 요소가 아닌 디자인 전체에 적용되는 속성을 제어할 수 있어요

다음 항목을 확인할 수 있어요:

• 프로젝트 이름. 디자인의 편집 가능한 이름으로, 헤더 섹션에 표시되며 내보내기 시 기본 파일 이름으로 사용됩니다

• 기본 내보내기 구성. 페이지를 내보낼 때 적용되는 형식, 배율, 이름 지정 기본값입니다. 개별 요소에 정의된 오버라이드 설정이 우선 적용됩니다

• 문서 프리셋. 이 디자인에 사용할 수 있는 페이지 크기 프리셋 목록입니다

이 뷰는 설정을 한 번만 지정하여 모든 곳에 일괄 적용하고 싶을 때 사용하는 화면이기도 합니다

2. 페이지 선택됨

페이지 내부의 요소가 아닌 페이지 자체를 클릭하면 페이지 속성이 열립니다. 이 뷰는 다중 페이지 문서에서 특정 페이지에만 적용되는 모든 설정을 제어합니다

다음 항목을 확인할 수 있어요:

• 너비 x 높이로 표시되는 치수와 단위 선택기(px, mm, cm, in)

• 페이지 프리셋. 배너, 카드, 이벤트 커버, 포스터, 이력서, 소셜 커버, 소셜 게시물, 소셜 프로필 사진, 소셜 스토리, 썸네일 등 일반적인 소셜 및 인쇄 형식의 크기를 빠르게 선택할 수 있습니다. 페이지를 자유로운 형식으로 유지할 수 있는 없음 옵션도 제공합니다

• 클립 콘텐츠. 페이지 경계 밖으로 확장된 요소가 표시될지 또는 잘릴지 결정해요

• 페이지 단위 내보내기 옵션.

인스펙터 패널은 선택 항목에 따라 변경돼요. 아무것도 선택하지 않으면 문서 설정이 표시되고, 페이지를 선택하면 해당 페이지의 특정 속성(치수, 크기 조절 옵션 등)이 나타나요

3. 이미지 요소 선택됨

이미지 속성 뷰는 이미지 요소와 관련된 모든 세부 사항을 보여줘요:

• 치수 및 비율.

• 크기 조절 모드. 이미지가 프레임 안에 맞춰지는 방식: 채우기, 맞춤, 맞추기

• 마스크 컨트롤. 모양 마스크로 이미지를 잘라내 보세요

• 투명 영역 자르기. 이미지에서 투명한 테두리를 제거해요

• 조정 및 필터. 밝기, 대비, 노출, 하이라이트, 그림자, 화이트, 블랙, 채도, 온도, 감마, 선명도, Clarity를 포함한 전체 프로 패널이에요

• 내보내기에 포함. 이 이미지를 내보내기 패널의 에셋 Tab에 표시할지 결정하는 요소별 토글

• 에셋 세부 정보. Magnific으로 생성한 이미지의 경우, 왼쪽 사이드바에서 에셋을 클릭하고 사용할 이미지를 선택하세요. 인스펙터에는 소스(사용된 툴, 모델, 프롬프트, 폴더, 크기, 생성 날짜, 태그)가 표시됩니다. 이는 읽기 전용 메타데이터로, 원본 생성물을 추적할 때 유용합니다

4. 텍스트 요소 선택됨

텍스트 속성 뷰에서 다음을 확인할 수 있어요:

• 폰트 패밀리, 굵기, 크기

• 색상(팔레트 및 문서 색상 포함)

• 정렬, 자간, 행간

• 배경이 있는 텍스트 디자인을 위한 배경 채우기, 패딩, 모서리 반경

• 텍스트별 내보내기 포함 토글

5. 그래픽 요소 선택됨

그래픽 속성 뷰는 도형, 벡터 비주얼, 또는 이미지나 텍스트가 아닌 비주얼 요소를 선택했을 때 나타나요. 다음 항목을 확인할 수 있어요:

• 채우기(단색 또는 그라데이션)

• 선 및 선 스타일

• 테두리 반경(모서리용)

• 위치 및 크기

• 그림자와 같은 효과

• 크기 조절

• 불투명도

• 내보내기

벡터 요소는 직접적인 경로 조작을 위한 추가적인 벡터 편집 진입점을 제공해요

인스펙터 패널은 선택한 요소에 따라 변경돼요. 이미지, 텍스트, 도형을 선택하면 해당 요소의 편집 속성이 표시돼요

6. 다중 선택

요소를 여러 개 선택하면 인스펙터는 선택된 모든 요소가 공유하는 속성을 통합해서 보여줘요. 인스펙터 상단에는 "3개 요소 선택됨"과 같이 개수가 표시돼요. 선택 항목 간에 값이 다른 속성은 단일 값 대신 다중으로 표시돼요. 값을 설정하면 선택한 모든 요소에 적용돼요

이 뷰에서는 선택 항목 전체에 대한 정렬 및 배치 컨트롤도 확인할 수 있어요

7. 선택된 콘텐츠

선택한 요소가 플레이스 홀더(Spaces 워크플로에서 동적 콘텐츠를 받도록 표시된 요소)인 경우, 인스펙터에는 플레이스 홀더 전용 속성이 표시돼요:

• 유형. 이미지 플레이스 홀더 또는 텍스트 플레이스 홀더

• 레이블. 플레이스 홀더의 이름으로, 인풋 패널에 표시되며 이 디자인에 워크플로를 연결하는 모든 사용자에게 보여요

• 연결된 레퍼런스. 현재 이 플레이스 홀더를 채우고 있는 워크플로 연결이 있다면 표시돼요. 여기서 연결을 변경하거나, 연결을 해제하거나, 플레이스 홀더를 완전히 제거할 수 있어요

이 뷰는 왼쪽 사이드바에 있는 Spaces 탭의 캔버스 측 대응 항목이에요

8. 페이지 생성 모드

페이지 생성 툴로 전환하면 인스펙터에 가이드가 표시됩니다. 캔버스에서 클릭하고 드래그하여 새 페이지를 정의해 보세요. 자유 형식 대신 미리 설정된 페이지 크기 중에서 선택하여 시작할 수도 있습니다

인스펙터 숨기기

인스펙터를 접어 캔버스를 더 넓게 활용할 수 있습니다. 인스펙터는 접힌 상태를 기억하여 다음번에 그대로 유지합니다

저장, 공유 및 협업

• 자동 저장은 계속 실행됩니다. 헤더에서 상태를 확인할 수 있습니다

• 버전 기록에서 이름이 지정된 저장 지점을 만들 수도 있습니다

• 여러 사람이 동시에 같은 디자인을 열 수 있습니다. 먼저 편집을 시작한 사람이 잠금 권한을 가지며, 다른 사람들은 PAN/줌은 가능하지만 편집 컨트롤은 없는 읽기 전용 모드로 보게 됩니다

디자인 버전을 저장하고 필요할 때마다 버전 기록을 사용하여 이전 버전으로 복원해 보세요

워크스페이스가 조정되는 방식

미리 알아두면 좋은 몇 가지 동작 방식이에요.

• 읽기 전용 모드. 다른 사람이 이미 편집 중인 디자인을 열면 읽기 전용으로 표시돼요. 푸터의 협업 표시기를 통해 누가 편집 권한을 가지고 있는지 확인할 수 있어요.

• Spaces 워크플로 내부. 이미지 탭의 인풋 하위 카테고리는 워크플로 컨텍스트 내에서만 나타나요. 독립 실행형 모드에서는 숨겨져 있어요.

• 선택 항목 없음. 아무 요소도 선택하지 않으면 인스펙터는 문서 수준의 컨트롤로 전환돼요. 이곳에서 전체 디자인에 대한 기본 내보내기 설정을 지정할 수 있어요.

용어

Designer는 캔버스 항목(이미지, 텍스트, 도형, 그래픽)을 일관되게 요소라고 불러요. 제품 내에서 여전히 '블록'이라는 단어가 보인다면, 곧 사라질 레거시 문구예요. 공식 제품 용어는 요소예요.

필요한 내용을 찾을 수 없다면, 도움말 센터의 지원 버튼을 사용해 보세요.