Opkle(옵클) - 창작자를 위한 앱과 시스템

EDITOR

CLASS

BLOG

표현한다는 것의무한한 가능성,

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

Opkle은 코드 없이 웹을 마음껏 만들고, 누구나 자기 화면을 그릴 수 있도록 에디터를 만들고, 그 결과물을 어디서나 즐길 수 있게 돕는 팀입니다.

텍스트와 화면과의 조화를 통해, 웹을 짓는다는 것이 그저 단순한 코딩이 아닌, 상상을 펼치고 감각을 깨우는 과정이 될 수 있도록 좋은 도구를 만들어 냅니다.

옵클 에디터 개발기: 표 이미지를 만들기 위한 스프레드시트

dev

옵클 에디터 개발기: 같은 데이터를 표와 보드, 캘린더로

dev

옵클 에디터 개발기: 책을 웹에서 그대로 읽게 하는 퍼블리셔

dev

옵클 에디터 개발기: 편집 화면을 그대로 웹에 게시하기

dev

옵클 에디터 개발기: EPUB 에디터가 모든 작업을 연결하는 방식

dev

...

21 옵클 에디터 개발기: EPUB 에디터가 모든 작업을 연결하는 방식

퍼블리셔까지 만들고 나니 다시 EPUB 에디터의 위치를 보게 되었습니다. 벡터 그래픽, 다중 페이지 레이아웃, 데이터 기반 표, 웹 게시 문서는 각각 독립된 편집기로 충분히 동작하고 있었습니다. 하지만 사용자가 만드는 것은 서로 떨어진 네 종류의 프로젝트가 아니라 이미지와 표, 조판과 게시 결과가 함께 들어 있는 한 권의 책입니다.

이들을 EPUB 에디터의 메뉴에서 열 수 있게 하는 것만으로는 충분하지 않았습니다. 어느 책에서 시작한 작업인지, 지금 편집하는 그래픽이 본문의 어느 요소와 연결되어 있는지, 레이아웃에서 만든 결과를 어디로 돌려보낼지, 게시 문서를 닫은 뒤 어느 작업공간으로 복귀할지까지 하나의 흐름으로 이어져야 했습니다. 각 편집기의 기능보다 편집기 사이의 관계를 설계하는 일이 필요했습니다.

그래서 EPUB 에디터를 모든 기능을 직접 수행하는 거대한 프로그램으로 만들지 않았습니다. 전문 편집기는 자기 문서와 렌더 엔진을 그대로 소유하고, EPUB 에디터는 현재 책의 문맥을 전달하고 적절한 작업공간을 열며 결과가 확정될 때까지 기다린 뒤 다시 책으로 통합하도록 만들었습니다. 이 시점부터 EPUB 에디터는 본문 편집기를 넘어 전체 제작 과정을 관리하는 orchestration 계층이 되었습니다.

Editor orchestration

오케스트레이션의 기준은 단순했습니다. 중앙 에디터가 모든 세부 기능을 가져서는 안 되고, 각 전문 에디터가 서로의 내부 구조를 알아서도 안 됩니다. 중앙은 어떤 작업을 누구에게 맡길지 결정하고, 시작에 필요한 문맥을 전달하며, 작업이 끝났을 때 결과를 받을 위치를 기억해야 합니다. 전문 에디터는 자신이 가장 잘 다루는 문서만 편집하고 약속된 결과를 돌려줍니다. 이는 권한의 분할이자, 의존 방향의 제한입니다.

벡터 에디터는 도형 공간과 시간 변화의 권위자가 됩니다. 레이아웃 에디터는 페이지 geometry와 텍스트 흐름을 관리합니다. 테이블 에디터는 셀 구조와 계산, 여러 뷰와 렌더 영역을 소유합니다. 퍼블리셔는 읽기 순서와 화면 배치, 공개 상태와 웹 문서의 identity를 관리합니다. EPUB 에디터가 이 상태를 중복해서 들고 있지 않으므로 각 엔진은 독립적으로 발전할 수 있습니다. 권위 있는 원본은 하나여야 합니다.

반대로 책 안에서 이 결과가 어떤 의미를 가지는지는 EPUB 에디터가 결정합니다. 그래픽은 본문의 특정 시각 컴포넌트가 되고, 표는 다시 편집할 수 있는 원본과 연결된 출판용 시각 자료가 됩니다. 레이아웃 결과는 책의 한 챕터나 고정판형 콘텐츠로 들어가고, 퍼블리셔는 현재 책 또는 그래픽 문서를 독자가 읽는 웹 버전으로 확정합니다. 작업 엔진의 권위와 책 구성의 권위를 나눈 것입니다.

이 분리는 기능 분할보다 중요했습니다. 한 편집기의 저장 형식이 바뀌더라도 다른 편집기는 그 내부를 해석할 필요가 없습니다. 중앙 에디터는 결과의 의미와 출처만 유지하고, 다시 편집해야 할 때 원본 작업공간으로 보내면 됩니다. 서로 다른 문서 모델이 하나의 거대한 공용 상태로 섞이지 않으면서도 사용자는 한 프로그램처럼 작업할 수 있게 되었습니다. 상태 공간을 합치지 않고 관계만 유지하는 설계입니다.

하나의 프로젝트, 여러 작업공간

각 전문 편집기는 독립된 프로젝트를 만들지만 그 프로젝트는 항상 현재 책 아래에 속합니다. 같은 제목의 벡터 문서가 여러 권에 존재하더라도 서로 섞이지 않고, 한 책 안에는 표지 그래픽, 본문 삽화, 메인 레이아웃, 여러 표와 게시 문서가 동시에 존재할 수 있습니다. 사용자가 보고 있는 EPUB 프로젝트가 이 작업 그래프의 중심점이 됩니다. 책은 root이고, 전문 문서는 그 아래의 자식 노드입니다.

새 작업을 시작하면 현재 책의 소속과 만들 문서의 종류, 기본 제목, 필요하면 편집할 본문 요소의 관계를 함께 넘겼습니다. 기존 작업을 다시 열 때는 같은 책에 속한 원본 문서를 정확히 찾아 복원합니다. 새 문서와 기존 문서의 진입을 분리했기 때문에 새 표를 만들었는데 마지막에 열었던 표가 나타나거나, 새 게시 문서가 이전 공개 문서를 덮는 일을 막을 수 있었습니다. 생성과 복원은 다른 morphism입니다.

전문 편집기 안에서는 부모 책의 폰트와 공통 자산도 사용할 수 있게 했습니다. 같은 서체를 편집기마다 다시 등록하지 않아도 벡터의 텍스트, 레이아웃의 본문, 표 이미지와 EPUB 본문이 같은 typography를 유지합니다. 자산은 각 편집기가 자신에게 필요한 방식으로 관리하되 책의 범위를 벗어나 다른 프로젝트의 파일을 가져오지 않습니다. 공유는 허용하되 경계 밖 참조는 금지합니다.

EPUB 에디터의 소스 화면은 이 관계를 기준으로 그래픽, 레이아웃, 표와 게시 문서를 나누어 보여줍니다. 전문 문서를 닫고 돌아오면 목록을 다시 읽어 방금 만든 결과를 즉시 반영합니다. 사용자는 파일 탐색기에서 산출물을 찾아 다시 가져오는 것이 아니라, 책 안에 연결된 작업 원본을 선택해 곧바로 이어서 편집합니다.

Context routing

어떤 편집기를 여는가는 화면 전환 이상의 의미를 가집니다. 현재 선택한 요소가 일반 이미지인지, 다시 편집할 수 있는 벡터 컴포넌트인지, 표 원본과 연결된 결과인지에 따라 같은 활성화도 다른 작업공간으로 이어져야 합니다. EPUB 에디터는 본문 요소에 남아 있는 출처와 연결 상태를 읽고 적절한 원본 편집기를 선택합니다. 선택 사건은 타입에 따라 다른 경로로 사상됩니다.

신규 그래픽을 만들 때는 본문에서 선택한 이미지와 표시 영역을 작업의 초기 문맥으로 사용할 수 있습니다. 기존 그래픽을 열 때는 이미 연결된 원본을 복원하고, 현재 EPUB에 놓인 위치와 크기는 책 쪽 상태로 남겨 둡니다. 그래픽의 내부를 고친다고 해서 본문에서 정한 문단 흐름이나 외부 배치까지 초기화되지 않습니다. 내부 상태와 배치 상태는 다른 층입니다.

레이아웃과 테이블도 같은 원칙을 따릅니다. 레이아웃은 현재 책의 콘텐츠를 흡수해 페이지로 조판할 수도 있고 완전히 새로운 고정판형 문서로 시작할 수도 있습니다. 테이블은 새 데이터 문서를 만들거나 본문 이미지와 연결된 기존 원본을 다시 엽니다. 진입할 때 작업의 목적을 확정해 두니 전문 편집기 안에서 어떤 문서를 추측할 필요가 없었습니다.

공통 인공지능 도구도 이 문맥을 따라갑니다. EPUB 본문을 편집할 때는 선택한 구조와 스타일 문맥을 이해하고, 벡터 작업공간이 열려 있으면 현재 오브젝트와 캔버스 상태를 기준으로 명령을 전달합니다. 표에서는 선택 셀과 활성 뷰를, 레이아웃에서는 페이지와 텍스트 흐름의 문맥을 사용합니다. 하나의 입력 창이 활성 작업공간을 판별하고 각 편집기의 명령 체계로 연결되도록 했습니다. 문맥이 잘못된 명령 공간으로 새지 않게 막는 라우팅입니다.

작업공간의 전환

전문 편집기를 동시에 겹쳐 놓는 방식은 사용하지 않았습니다. 한 시점에는 하나의 작업공간만 활성화하고, 전환이 필요하면 현재 편집기의 상태를 먼저 확정한 뒤 다음 편집기를 엽니다. 이렇게 해야 포커스와 선택 상태, 팝업 계층, 자동저장과 AI 문맥이 어느 편집기를 가리키는지 모호해지지 않습니다. 활성 집합의 크기를 하나로 제한한 상호배제입니다.

레이아웃에서 이미지를 벡터로 다시 그리고 싶을 때가 대표적입니다. 사용자는 레이아웃을 닫고 별도의 파일을 만드는 과정을 의식하지 않습니다. 시스템은 현재 페이지와 이미지 원본의 관계를 기억한 채 벡터 작업공간으로 전환하고, 편집이 끝나면 결과를 확정한 뒤 같은 레이아웃 문서를 다시 엽니다. 새 결과는 기존 프레임의 위치를 유지하면서 내용과 비율만 갱신됩니다. 관계는 유지하고 payload만 바꿉니다.

빈 레이아웃 프레임에서 표를 만드는 흐름도 같습니다. 표 편집기는 데이터와 뷰를 가진 원본 문서를 만들고, 출판용 렌더를 완성한 뒤 레이아웃으로 돌아갑니다. 레이아웃에는 이미지 결과가 배치되지만 그 뒤의 표 프로젝트 연결은 남아 있습니다. 나중에 표를 다시 열어 셀을 고치면 같은 프레임의 결과만 교체됩니다.

벡터나 레이아웃에서 웹 게시로 넘어갈 때는 완성된 그래픽 패키지와 원본 작업공간의 위치를 함께 기억했습니다. 퍼블리셔에서 디자인과 읽기 순서를 조정하고 닫으면 사용자가 작업하던 벡터 또는 레이아웃 문서로 다시 돌아옵니다. 중앙 EPUB 에디터가 편집기 사이의 이동 경로를 관리하므로 자식 편집기끼리 서로의 화면 구조를 알 필요가 없습니다. 경로는 중앙 그래프에만 있습니다.

Source of truth

편집기를 연결할 때 가장 경계한 것은 같은 상태를 여러 곳에서 동시에 권위적으로 관리하는 일이었습니다. 벡터 그래픽을 EPUB에 넣었다고 해서 EPUB 쪽에서 레이어 데이터 전체를 복제해 편집하지 않습니다. 책에는 렌더된 컴포넌트와 원본 연결을 남기고, 세부 수정은 언제나 벡터 원본으로 돌아가 수행합니다. 복제가 아니라 참조입니다.

표도 마찬가지입니다. EPUB에는 독자가 보게 될 표 이미지가 들어가지만 행과 열, 계산과 뷰의 원본은 테이블 편집기가 관리합니다. 레이아웃 문서는 페이지별 결과와 책 안에서의 사용 관계를 제공하지만 마스터와 텍스트 흐름의 권위는 레이아웃 편집기에 남습니다. 퍼블리셔도 공개 화면을 위한 설정을 관리할 뿐 EPUB 본문의 작성 원본을 대신하지 않습니다. 각 노드의 source of truth는 유일합니다.

이 원칙 덕분에 동기화는 모든 상태를 실시간 복제하는 문제가 아니게 되었습니다. 각 편집기가 자신의 원본을 확정하고, 중앙은 결과와 연결 관계만 원자적으로 교체합니다. 수정 도중의 절반짜리 상태나 저장되지 않은 중간값이 책으로 들어오지 않고, 마지막으로 완료된 결과는 언제나 다시 생성할 수 있는 원본을 가집니다. 커밋된 결과만 경계를 넘습니다.

원본이 갱신될 때도 연결 식별자를 유지했습니다. 그래픽을 다시 렌더하거나 표 이미지를 교체해도 본문 요소의 위치, 반응형 조건과 주변 문서 흐름은 그대로 남습니다. 게시 문서를 다시 만들 때도 기존 디자인 설정과 공개 주소를 가진 문서를 유지한 채 콘텐츠만 갱신합니다. 원본과 결과의 생명주기를 분리하면서 둘 사이의 관계는 끊기지 않게 했습니다.

결과를 책으로 되돌리기

전문 편집기의 결과를 모두 같은 파일 형식으로 평탄화하지 않았습니다. 벡터 작업은 구조와 움직임을 보존한 그래픽 컴포넌트로 돌아올 수 있고, 최종 이미지가 필요한 경우에는 해상도와 배경을 확정한 래스터 결과로 들어옵니다. 테이블은 데이터 편집 가능성을 유지한 채 EPUB에서 안정적으로 표시되는 이미지가 됩니다. 결과 타입은 목적에 따라 다릅니다.

레이아웃은 페이지 구조에 따라 결과가 달라집니다. EPUB 본문으로 흡수할 때는 문서의 구조와 스타일, 이미지와 폰트를 자기완결 상태로 정리해 전달하고, 고정판형 결과가 필요하면 페이지 geometry를 보존한 그래픽 문서로 사용합니다. 중앙 에디터는 어느 결과가 왔는지에 따라 책의 자산을 등록하고 경로를 정리하며 본문 구조에 맞는 형태로 삽입합니다. 타입별 삽입 규칙입니다.

이 과정에서 결과의 시각적 모양만 보는 것이 아니라 출처와 재편집 가능성도 함께 보존했습니다. 본문에 들어간 그래픽에는 어느 원본 프로젝트에서 왔는지가 남고, 표 이미지에도 원본 데이터 문서의 관계가 유지됩니다. 결과물을 삭제하거나 복제할 때는 연결된 원본과 자산의 생명주기도 함께 판단할 수 있습니다.

삽입이 완료되면 EPUB 에디터의 여러 미리보기와 문서 상태가 같은 결과를 읽도록 갱신했습니다. 그래픽 하나를 바꾼 뒤 기기별 미리보기가 서로 다른 과거 이미지를 들고 있지 않게 하고, 저장되는 문서 표현과 실제 화면도 같은 자산 경로를 사용하게 했습니다. 전문 편집기의 결과가 책에 들어오는 마지막 지점에서 다시 EPUB의 정합성 규칙을 적용한 것입니다. 관측 가능한 모든 표면이 같은 상태에 수렴해야 합니다.

Commit boundary

작업공간을 닫는 순간은 UI 이벤트가 아니라 하나의 transaction boundary로 다뤘습니다. 사용자가 셀이나 제목을 입력하는 중이라면 포커스를 정리해 마지막 값을 확정하고, 예약된 편집 작업과 자동저장이 모두 끝날 때까지 기다립니다. 그래픽이나 표처럼 책으로 돌려보낼 렌더 결과가 필요한 경우에는 그 생성까지 완료되어야 닫기가 끝납니다. 경계 밖으로는 커밋된 상태만 나갑니다.

진행 중인 저장이 있다고 해서 두 번째 저장을 병렬로 시작하지 않았습니다. 현재 저장이 끝난 뒤 최신 변경분을 한 번 더 확정하도록 직렬화하고, 전문 편집기가 완료 상태를 알린 다음에만 작업공간을 제거했습니다. 화면이 먼저 닫혀 비동기 작업이 중간에 끊기거나, 마지막 한 글자와 마지막 오브젝트 이동이 사라지는 경우를 막았습니다. 종료는 완료의 후행 조건입니다.

결과를 받는 EPUB 에디터도 바로 화면만 바꾸지 않습니다. 필요한 자산이 모두 등록되었는지 확인하고, 기존 요소를 교체할지 새 요소를 만들지 결정하며, 여러 미리보기와 저장 문서를 함께 갱신합니다. 그다음 작업 목록을 다시 읽어 원본 프로젝트의 최신 제목과 수정 시각을 반영합니다. 닫기와 복귀가 하나의 확정된 상태 전이로 동작합니다.

응답이 지연되거나 결과 생성이 실패하는 경우에는 현재 책의 정상 상태를 우선했습니다. 새 결과가 완성되지 않았으면 기존 요소를 지우지 않고, 중단된 전환 정보가 다음 작업에 재사용되지 않도록 정리했습니다. 성공한 작업만 책에 반영되고 실패한 작업은 이전의 완전한 상태를 유지하게 했습니다. fail-closed와 이전 완전 상태의 보존입니다.

공통 서비스의 중심

전문 편집기가 독립적이라고 해서 모든 기반 기능을 각자 반복해서 만들 필요는 없었습니다. 현재 사용자와 책의 소속, 공통 폰트, 프로젝트 자산, AI 진입점과 작업공간 복귀는 EPUB 에디터가 중심에서 제공합니다. 자식 편집기는 자신에게 필요한 서비스만 받아 사용하고 편집 기능에 집중합니다. 공통 계층은 정책이고, 전문 계층은 계산입니다.

특히 AI 진입점은 중앙에 유지하되 실행은 각 편집기의 검증된 명령 계층에 맡겼습니다. 부모는 현재 어떤 작업공간이 활성화되어 있는지와 무엇이 선택되어 있는지를 확인해 요청의 문맥을 구성합니다. 벡터 오브젝트를 다루는 명령이 EPUB 본문 수정 경로로 들어가거나, 표의 셀 명령이 레이아웃 페이지에 적용되는 일을 구조적으로 차단했습니다. 명령의 정의역과 치역을 작업공간에 묶었습니다.

폰트도 책의 자산 문맥을 중심으로 공유했습니다. EPUB에 등록한 서체는 그래픽과 레이아웃, 표에서도 같은 family와 weight로 사용할 수 있고, 각 전문 문서가 자체 폰트를 추가하면 결과를 책으로 보낼 때 필요한 자산이 함께 정리됩니다. 편집 화면에서는 같아 보이지만 최종 출력에서 fallback으로 바뀌는 문제를 줄였습니다.

이렇게 중앙화한 것은 기능 구현이 아니라 문맥과 정책입니다. 실제 도형 편집, 조판, 셀 계산과 게시 렌더는 각 엔진에 남겨 두었습니다. 공통 계층은 사용자가 어느 작업공간에 있더라도 같은 책을 편집하고 있다는 연속성을 제공하고, 전문 계층은 각 분야의 깊이를 유지합니다.

Portable workspace

한 책에 전문 문서가 연결되었다면 EPUB 프로젝트를 다른 컴퓨터로 옮길 때 그 원본들도 함께 이동해야 합니다. 완성된 EPUB 본문만 내보내면 표 이미지는 보이더라도 셀 데이터가 사라지고, 벡터 그래픽은 보이더라도 구조를 다시 편집할 수 없습니다. 웹 게시 설정과 레이아웃 원본도 같은 문제가 생깁니다. 결과는 남아도 생성 함수가 사라지는 것과 같습니다.

그래서 프로젝트를 저장용 패키지로 만들 때 EPUB의 본문과 자산뿐 아니라 책에 속한 벡터, 레이아웃, 테이블과 퍼블리셔 문서까지 함께 수집했습니다. 각 편집기의 문서 구조는 그대로 보존하고, 이미지와 폰트, 구조화된 원본 데이터와 그래픽 패키지는 역할에 맞게 분리해 담았습니다. 중앙 패키지가 모든 문서를 하나의 거대한 공용 문서로 뭉개지 않도록 했습니다. 그래프를 직렬화하되 노드의 타입은 유지합니다.

다른 환경에서 불러오면 기존 식별자를 그대로 신뢰하지 않고 새 저장소의 식별자로 다시 배정했습니다. 문서가 참조하던 이미지와 폰트, 페이지와 레이어, 표 셀의 자산 참조, 게시 문서의 원본 패키지 연결을 새 식별자로 치환합니다. 하나의 자산을 여러 문서가 공유한다면 한 번만 복원한 뒤 같은 새 대상을 가리키게 했습니다. 동치 관계를 보존하는 재라벨링입니다.

복원 중 일부 문서가 실패해도 이미 만들어진 불완전한 자산이 고아로 남지 않도록 문서 단위로 정리했습니다. 반대로 자산 목록에 누락되었지만 실제 문서 내용이 참조하는 파일은 내용까지 스캔해 함께 복원했습니다. 내보내기와 불러오기가 단순 파일 복사가 아니라 전체 작업 그래프의 참조 무결성을 재구성하는 과정이 되었습니다.

한 권으로 수렴하는 구조

이 구조가 완성되면서 EPUB 에디터의 역할은 분명해졌습니다. 모든 것을 직접 그리거나 조판하는 만능 캔버스가 아니라, 책의 본문과 자산을 기준으로 전문 편집기를 호출하고 결과를 다시 읽기 가능한 문서로 수렴시키는 중앙 제작 환경입니다. 편집기는 분리되어 있지만 프로젝트의 흐름은 끊기지 않습니다.

새 그래픽과 기존 그래픽, 새 표와 연결된 표, EPUB을 흡수한 레이아웃과 빈 레이아웃, 레이아웃에서 벡터·테이블로 이동하는 왕복, 벡터·레이아웃에서 퍼블리셔로 이동한 뒤 원본으로 돌아오는 흐름을 모두 반복 검수했습니다. 자동저장 도중 닫기, 결과 생성 실패, 빠른 작업공간 전환과 기존 문서 재열기에서도 마지막으로 확정된 상태가 유지되는 것을 확인했습니다.

프로젝트 전체 내보내기와 다른 장치에서의 복원도 벡터 구조, 레이아웃 페이지와 마스터, 표의 원본 데이터와 뷰, 게시 설정과 원본 패키지까지 확인했습니다. 새로 배정된 자산 관계와 본문에 남은 원본 연결이 모두 일치했고, 복원한 전문 문서를 다시 편집해 EPUB 결과를 갱신하는 왕복도 정상적으로 통과했습니다.

EPUB 본문, 그래픽, 조판, 데이터 시각화와 웹 게시를 하나의 프로젝트 흐름으로 연결하는 오케스트레이션은 완전하게 구현되고 안정화되었습니다. 이제 옵클의 EPUB 에디터는 파일 하나를 만드는 도구가 아니라 한 권의 책이 완성되는 모든 전문 작업을 연결하는 제작 시스템이 되었습니다.

목록으로

저작권 고시

본 웹사이트의 모든 디자인 결과물 및 영상에 대한 저작권은 Abstract Cloud에 있으며, 저작권법 및 관련 법령에 의해 보호받습니다. 웹, 영상, 본문, 표지, 내지 디자인을 포함한 모든 콘텐츠는 저작권자의 자산으로, 사전 동의 없이 무단 복제, 배포, 2차 저작물 제작, 온라인 공유 등을 금지합니다. 이를 위반할 시, 저작권법에 따라 민형사상 책임을 질 수 있습니다. 정당한 구매와 저작권 보호는 창작자의 권리를 지키며, 더 나은 작품으로 보답할 힘이 됩니다.

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

상호 :추상적 형상 디자인(Abstract cloud) | 대표자 :배창규

사업자등록번호 :249-74-00533

통신판매업 신고번호 :2025-의정부송산-0634

주소 :경기도 의정부시 부용로 49, 108동 402호