옵클 에디터 설명서 - 그래픽 디자인 툴 사용법

Docs / 시작하기

옵클을 차근차근 배워 보세요

처음 켜는 순간부터 그리기, 사진 편집, AI, 내보내기까지. 필요한 주제를 골라 따라가 보세요.

옵클 에디터 시작하기

새 프로젝트를 만들고 첫 캔버스를 열어 도형을 그리기까지, 처음 10분의 흐름입니다.

화면 구성 둘러보기

도구 막대, 레이어와 대지, 오른쪽 인스펙터, 아래 단추와 AI 입력창, 캔버스 설정까지 화면의 역할입니다.

단축키와 빠른 실행

자주 쓰는 단축키와, 이름으로 명령을 찾아 실행하는 빠른 실행 창입니다.

다른 디자인 툴에서 넘어오셨다면

피그마·일러스트레이터·포토샵에서 쓰던 기능이 옵클 에디터의 어디에 있는지 짝지어 봅니다.

벡터 디자인

대지와 레이어

여러 대지를 만들고 크기를 바꾸는 법, 레이어를 묶고 순서를 정리하는 법입니다.

벡터 디자인

도형과 펜으로 그리기

기본 도형부터 별·도넛 같은 모양, 펜으로 곡선을 그리고 점을 다듬는 법입니다.

벡터 디자인

한 줄 글자·글상자·패스 위 글자를 쓰고, 문자·단락 칸으로 다듬고, 디자인 안에 표를 넣는 법입니다.

벡터 디자인

단색·그라디언트·이미지 칠과 여러 겹, 선 옵션 창의 끝 모양·점선·화살촉까지 다룹니다.

벡터 디자인

패스 편집과 패스파인더

도형을 합치고 빼서 새 모양을 만들고, 점을 다듬고, 휘거나 반복하는 법입니다.

벡터 디자인

레이어 스타일과 효과

그림자·광선·획 같은 레이어 스타일과, 모든 요소에 거는 필터 칸의 흐림·색·그림자입니다.

프레임·오토 레이아웃·제약

크기가 바뀌어도 무너지지 않는 버튼·카드·화면을 만드는 법입니다.

컴포넌트와 에셋

여러 번 쓰는 요소를 원본 하나로 관리하고, 컴포넌트 에셋 창에서 꺼내 쓰는 법입니다.

스타일 설정

칠·선 스타일, 단락 스타일, 보정 스타일, 벡터 스타일로 자주 쓰는 모양을 담아 두고 한 번에 거는 법입니다.

사진과 픽셀

사진 넣기·자르기·마스크

사진을 캔버스에 넣고, 자르고, 대지에 맞추고, 마스크로 일부만 보이게 하는 기본 흐름입니다.

사진과 픽셀

사진을 고르면 나오는 보정 칸 — ML 보정부터 레벨·곡선·LUT, 벡터 트레이싱까지입니다.

사진과 픽셀

브러시·선택·리터치·필터

픽셀을 직접 칠하고, 원하는 부분만 고르고, 잡티를 지우고, 필터 창으로 효과를 거는 도구들입니다.

내 컴퓨터에서 도는 AI

사진을 외부 서버에 올리지 않고 내 컴퓨터에서 처리하는 AI 기능들입니다.

이미지·영상 생성과 서버 AI

이미지 생성 창과 이미지를 비디오로, 아웃페인팅·업스케일링·AI 채우기처럼 크레딧으로 쓰는 AI입니다.

Opkle AI에게 말로 맡기기

화면 아래 AI 입력창에 하고 싶은 일을 적어 에디터 조작을 맡기는 법입니다.

플러그인 쓰기

왼쪽 «플러그인» 탭에서 플러그인을 부르고, 승인하고, 정리하는 법입니다.

AI 에게 플러그인 만들게 하기

연결한 AI 에게 말로 부탁해 나만의 기능을 만드는 법과 잘 부탁하는 요령입니다.

플러그인 마켓

다른 사람이 만든 플러그인을 받고, 내가 만든 플러그인을 나누는 법입니다.

애니메이션·영상·3D 목업

애니메이션 창의 프리셋·키프레임, 영상 편집기, MP4 내보내기와 3D 목업까지입니다.

파일 불러오기

쓰던 SVG·PDF·일러스트레이터·포토샵 파일과 글꼴·사진·영상을 가져오는 법입니다.

이미지·PDF·영상으로 내보내는 법과, 레이어마다 형식을 정해 한 번에 내보내는 법입니다.

프로젝트 백업과 기기 옮기기

작업을 파일 하나로 내보내 보관하고, 다른 기기에서 그대로 이어 가는 법입니다.

커뮤니티 이용하기

대화방·스레드·반응·다이렉트 메시지·게시판과 팀 공간, 알림 설정까지 커뮤니티 사용법입니다.

AI 사전 읽는 법

옵클 에디터 캔버스의 모든 기능을 «사람은 어디를 누르나 · AI·스크립트는 어떤 액션으로 하나 · 값의 범위와 기본값»으로 적은 사전의 읽는 법입니다.

AI 연결(MCP)과 도구

Claude 데스크톱·Claude Code·Codex 를 옵클 에디터에 잇는 법과 MCP 도구의 인자·쓰임 · 이 컴퓨터 파일·프로젝트·체크포인트·사람에게 묻기 · 연결 때 받는 안내문

결과와 오류

액션·스크립트·MCP 도구가 돌려주는 봉투의 칸 뜻 · 오류 코드와 할 일 · 그림·파일이 오는 꼴

스크립트 사전

캔버스 문서 안 스크립트(doc·node)와 여러 문서를 오가는 지휘 스크립트(app.open)의 객체 모델 전부 — 멤버·저절로 생기는 메서드·단위·대상 고르기·오류·함정

캔버스·지휘 스크립트 레시피 19개 — 하는 일·찾는 낱말·코드 전문

예시 스크립트 — 만들기·고르기·바꾸기

문서 안 스크립트의 기본 예시입니다. 모두 평가 캔버스(대지 750×1000 · 노란 사각형 하나 · 파란 원 하나)에서 실제로 돌려 확인했고, 결과 줄은 그때 받은 값입니다(lid 는 문서마다 다릅니다).

예시 스크립트 — 배치·글자·대지

정렬·분배·격자·글자 맞춤·여러 대지를 다루는 예시입니다. 좌표는 지금 대지의 왼쪽 위가 원점이고 px 입니다. 모두 평가 캔버스에서 실제로 돌려 확인했습니다.

예시 스크립트 — 사진·효과·애니메이션·추출

그라디언트·레이어 스타일·선 옵션·그림자·애니메이션·추출·사진 필터·붓 설정 예시입니다. 사진 예시는 사진이 든 평가 캔버스(평가3-도쿄 — 사진이 클립 묶음 안에 있다)에서 돌렸습니다.

예시 스크립트 — 여러 문서·파이썬·MCP 묶음

여러 문서를 열고 오가는 지휘 스크립트(opkle_run_script — JS 와 파이썬)와 MCP 도구 인자 예시입니다. 문서는 한 번에 하나만 열리고, 다른 문서를 열면 앞 문서는 저장 확정 뒤 닫힙니다.

플러그인 만들기

AI 가 MCP 로 옵클 캔버스에 나만의 에디터를 짓는 법 — 사람 말을 형태로 옮기기 · 두 틀 여섯 형태 · JSON 칸 · render·main.js · 시험 고리 · 오류와 고침 · 만드는 요령 · 고급(시간·프리셋·동적 칸·무대·WebGL) · 넘기기 전 점검 · 마켓 · 검증된 예제

기능 사전 — 객체·외형

객체·외형(선택·변형·정렬·순서·칠·선·효과) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — 패스·도형

패스·도형(펜·노드·패스파인더·워프·반복·블렌드·트레이싱) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — 텍스트

텍스트(글·서식·스타일·글꼴) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — 대지·디자인 시스템

대지·디자인 시스템(대지·오토 레이아웃·그리드·컴포넌트·에셋·색 스타일·안내선·보기) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — 픽셀·보정

픽셀·보정(붓·선택·마스크·조정 레이어·보정·필터·유동화) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — AI 기능

AI(로컬 AI 선택·지우기·업스케일·노이즈 제거·생성·채우기) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

기능 사전 — 입출력·애니메이션

입출력·애니(가져오기·추출·애니메이션·영상 편집기·인터랙션·프로젝트) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자·돌려주는 것·범위·기본값

예시 스크립트 — 레이아웃(지면)

레이아웃 문서 안 스크립트 예시입니다. 위치·크기는 pt, 판형·여백은 mm, 쪽 번호는 0부터입니다. 모두 평가 레이아웃 문서에서 실제로 돌려 확인했습니다.

레이아웃 기능 사전 — 글·스타일

글·스레딩·서식·스타일·찾기 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — 쪽·마스터

쪽·마스터·판형·보기 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — 객체

객체·외형·레이어 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — 챕터·링크·템플릿

챕터·링크·템플릿 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — epub

epub 편집·서식창·추출 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — 가져오기

가져오기(흡수) — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — 애니메이션·내보내기

애니메이션·내보내기·저장·단축키 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

레이아웃 기능 사전 — AI·스크립트 전용

AI·스크립트 전용 — 기능마다 사람 입구·AI 액션·부르는 꼴·인자

옵클 에디터 설명서 전체 쪽

시작하기

옵클 에디터 시작하기 — 새 프로젝트를 만들고 첫 캔버스를 열어 도형을 그리기까지, 처음 10분의 흐름입니다.
화면 구성 둘러보기 — 도구 막대, 레이어와 대지, 오른쪽 인스펙터, 아래 단추와 AI 입력창, 캔버스 설정까지 화면의 역할입니다.
단축키와 빠른 실행 — 자주 쓰는 단축키와, 이름으로 명령을 찾아 실행하는 빠른 실행 창입니다.
다른 디자인 툴에서 넘어오셨다면 — 피그마·일러스트레이터·포토샵에서 쓰던 기능이 옵클 에디터의 어디에 있는지 짝지어 봅니다.

벡터 디자인

대지와 레이어 — 여러 대지를 만들고 크기를 바꾸는 법, 레이어를 묶고 순서를 정리하는 법입니다.
도형과 펜으로 그리기 — 기본 도형부터 별·도넛 같은 모양, 펜으로 곡선을 그리고 점을 다듬는 법입니다.
글자와 표 — 한 줄 글자·글상자·패스 위 글자를 쓰고, 문자·단락 칸으로 다듬고, 디자인 안에 표를 넣는 법입니다.
칠과 선 — 단색·그라디언트·이미지 칠과 여러 겹, 선 옵션 창의 끝 모양·점선·화살촉까지 다룹니다.
패스 편집과 패스파인더 — 도형을 합치고 빼서 새 모양을 만들고, 점을 다듬고, 휘거나 반복하는 법입니다.
레이어 스타일과 효과 — 그림자·광선·획 같은 레이어 스타일과, 모든 요소에 거는 필터 칸의 흐림·색·그림자입니다.

UI 디자인

프레임·오토 레이아웃·제약 — 크기가 바뀌어도 무너지지 않는 버튼·카드·화면을 만드는 법입니다.
컴포넌트와 에셋 — 여러 번 쓰는 요소를 원본 하나로 관리하고, 컴포넌트 에셋 창에서 꺼내 쓰는 법입니다.
스타일 설정 — 칠·선 스타일, 단락 스타일, 보정 스타일, 벡터 스타일로 자주 쓰는 모양을 담아 두고 한 번에 거는 법입니다.

사진과 픽셀

사진 넣기·자르기·마스크 — 사진을 캔버스에 넣고, 자르고, 대지에 맞추고, 마스크로 일부만 보이게 하는 기본 흐름입니다.
사진 보정 — 사진을 고르면 나오는 보정 칸 — ML 보정부터 레벨·곡선·LUT, 벡터 트레이싱까지입니다.
브러시·선택·리터치·필터 — 픽셀을 직접 칠하고, 원하는 부분만 고르고, 잡티를 지우고, 필터 창으로 효과를 거는 도구들입니다.

AI

내 컴퓨터에서 도는 AI — 사진을 외부 서버에 올리지 않고 내 컴퓨터에서 처리하는 AI 기능들입니다.
이미지·영상 생성과 서버 AI — 이미지 생성 창과 이미지를 비디오로, 아웃페인팅·업스케일링·AI 채우기처럼 크레딧으로 쓰는 AI입니다.
Opkle AI에게 말로 맡기기 — 화면 아래 AI 입력창에 하고 싶은 일을 적어 에디터 조작을 맡기는 법입니다.

플러그인

플러그인 쓰기 — 왼쪽 «플러그인» 탭에서 플러그인을 부르고, 승인하고, 정리하는 법입니다.
AI 에게 플러그인 만들게 하기 — 연결한 AI 에게 말로 부탁해 나만의 기능을 만드는 법과 잘 부탁하는 요령입니다.
플러그인 마켓 — 다른 사람이 만든 플러그인을 받고, 내가 만든 플러그인을 나누는 법입니다.

모션과 3D

애니메이션·영상·3D 목업 — 애니메이션 창의 프리셋·키프레임, 영상 편집기, MP4 내보내기와 3D 목업까지입니다.

파일

파일 불러오기 — 쓰던 SVG·PDF·일러스트레이터·포토샵 파일과 글꼴·사진·영상을 가져오는 법입니다.
내보내기 — 이미지·PDF·영상으로 내보내는 법과, 레이어마다 형식을 정해 한 번에 내보내는 법입니다.
프로젝트 백업과 기기 옮기기 — 작업을 파일 하나로 내보내 보관하고, 다른 기기에서 그대로 이어 가는 법입니다.

커뮤니티

커뮤니티 이용하기 — 대화방·스레드·반응·다이렉트 메시지·게시판과 팀 공간, 알림 설정까지 커뮤니티 사용법입니다.