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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

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

dev

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

dev

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

dev

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

dev

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

dev

...

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

테이블 에디터까지 만든 뒤에는 완성된 콘텐츠가 독자에게 도착하는 마지막 경로를 다시 보게 되었습니다. EPUB 파일을 내려받게 하거나 유통사에 등록하는 방식만으로는 부족했습니다. 편집기에서 만든 책을 별도의 웹사이트 개발 없이 바로 브라우저에 게시하고, 모바일과 데스크탑에서 책의 구조와 동작을 그대로 보여줄 수 있어야 했습니다.

EPUB을 HTML 몇 장으로 변환해 올리는 기능을 만들 생각은 없었습니다. 그 방식은 본문은 남겨도 편집기에서 설정한 페이지 넘김, 스프레드, 다크 모드, 챕터 탐색, 여백과 레이아웃을 잃습니다. 벡터와 레이아웃 에디터에서 만든 고정판형 문서는 더 직접적입니다. 비율과 시간축, 페이지 사이의 관계가 보존되지 않으면 웹 게시글은 원본과 다른 문서가 됩니다.

그래서 퍼블리셔를 단순한 출력 창이 아니라 하나의 독립된 문서 에디터로 만들었습니다. 중요한 것은 어떤 데이터를 어디로 보내는가가 아니라, 편집할 때 관측한 문서와 독자가 읽을 때 관측하는 문서가 같은가였습니다. 이 문제를 화면 복사가 아니라 두 실행 환경 사이의 의미 보존 문제로 정의했고, 퍼블리셔 전체를 그 정의 위에서 다시 정리했습니다.

Publication state

출판 상태를 수학적으로 보면 콘텐츠 집합 \(C\), 표현 규칙 \(S\), 탐색 구조 \(N\), 실행 환경 \(E\)의 곱공간으로 생각할 수 있습니다. 하나의 게시 문서는 \(p=(c,s,n,e)\in C\times S\times N\times E\)이고, 렌더러는 이 상태를 관측 가능한 화면으로 보내는 함수 \(R:P\to O\)가 됩니다. 여기서 게시의 정확성은 파일이 존재한다는 사실보다 \(R(p)\)가 편집기와 공개 환경에서 같은 의미를 갖는지로 결정됩니다.

완전히 같은 픽셀만을 요구하면 서로 다른 화면 크기를 다룰 수 없습니다. 반대로 의미만 같다고 느슨하게 정의하면 여백, 펼침 방식, 페이지 순서가 달라져도 같은 문서라고 우길 수 있습니다. 그래서 동등성은 여러 층으로 나누었습니다. 텍스트와 자산의 내용 동등성, 읽기 순서의 순서 동등성, 레이아웃 제약의 구조 동등성, 상호작용의 전이 동등성이 모두 성립해야 같은 publication으로 볼 수 있습니다.

이때 핵심은 상태의 어느 한 성분도 다른 성분의 임시 결과로 취급하지 않는 것입니다. 탐색 상태는 레이아웃의 부산물이 아니고, 표현 규칙은 콘텐츠 문자열에 섞여 들어가는 장식도 아닙니다. 각각은 독립적인 좌표축이지만 최종 관측값에서는 함께 작용합니다. 이런 곱공간 모델을 잡아 두면 한 축을 바꿀 때 다른 축이 보존되어야 한다는 불변식이 자연스럽게 드러납니다.

퍼블리셔의 편집 과정도 결국 상태 \(p_t\)를 다음 상태 \(p_{t+1}\)로 보내는 전이입니다. 허용된 전이만 모으면 하나의 상태 기계가 되고, 저장이나 게시 같은 경계에서는 전이 전후의 불변식이 성립해야 합니다. 실제 구현은 이 수학적 모델을 훼손하지 않는 선에서 정리했고, 덕분에 다양한 문서가 들어와도 퍼블리셔의 의미 체계는 하나로 유지되었습니다.

직교 상태 공간

문서 상태를 한 덩어리로 취급하면 변경의 영향 범위를 계산하기 어렵습니다. 어떤 수정은 본문에만 영향을 주고, 어떤 수정은 표현에만 영향을 주며, 어떤 수정은 순서만 바꿉니다. 이를 벡터 \(x=(x_1,x_2,\ldots,x_n)\)로 보면 좋은 분해란 각 좌표가 가능한 한 낮은 상관성을 갖도록 기저를 고르는 일과 비슷합니다. 한 좌표의 변화가 모든 좌표를 다시 쓰게 한다면 기저를 잘못 잡은 것입니다.

상태를 생명주기와 의미에 따라 분리하고, 서로 다른 변화율을 가진 성분이 같은 갱신 주기를 강요받지 않게 했습니다. 오래 유지되는 정체성과 자주 바뀌는 표현값, 원본에서 유도되는 값과 사용자가 직접 결정한 값은 같은 시간 척도에 있지 않습니다. 이를 직교에 가까운 축으로 놓으면 변경 벡터 \(\Delta x\)가 희소해지고, 실제로 영향받는 부분만 계산할 수 있습니다.

물론 현실의 상태는 완전히 직교하지 않습니다. 읽기 순서가 바뀌면 현재 위치의 해석도 달라지고, 화면 조건이 바뀌면 같은 표현값의 결과가 달라집니다. 그래서 독립성보다는 조건부 의존성을 그래프로 두는 편이 정확합니다. 상태 성분을 꼭짓점으로, 직접적인 영향만 간선으로 두면 한 변경이 만드는 폐포를 구할 수 있고, 불필요한 전체 재계산을 줄일 수 있습니다.

저장 가능성도 이 구조에서 설명할 수 있습니다. 상태를 정규형 \(\nu(x)\)로 보낸 뒤 같은 의미를 가진 표현들이 하나의 대표값으로 수렴하게 하면, \(\nu(\nu(x))=\nu(x)\)인 멱등성이 생깁니다. 색상 표기나 범위를 벗어난 수치, 오래된 형태의 설정처럼 표현만 다른 값들은 로드와 저장을 반복해도 더 이상 흔들리지 않습니다. 문서의 장기 안정성은 거대한 저장 함수보다 이 정규형의 성질에서 나왔습니다.

Flow와 fixed semantics

퍼블리셔가 다루는 문서는 크게 흐름형과 고정판형이라는 서로 다른 의미 영역에 놓입니다. 흐름형 문서에서 위치는 화면 조건에 따라 다시 계산되는 함수이고, 고정판형에서 위치는 원본 좌표계에 속하는 값입니다. 둘을 같은 좌표 의미론으로 해석하면 어느 한쪽은 반드시 손상됩니다.

이를 타입 이론으로 보면 문서 공간은 단순한 집합이 아니라 서로 다른 생성 규칙을 가진 합타입 \(D=D_{flow}+D_{fixed}\)입니다. 흐름형의 배치 연산은 폭과 글꼴 계량에 의존하는 재조판 함수이고, 고정판형의 배치 연산은 원본 좌표를 화면 좌표로 보내는 변환입니다. 공통 인터페이스가 존재하더라도 내부 의미까지 같다고 가정해서는 안 됩니다.

두 형식에 공통인 것은 페이지를 앞으로 또는 뒤로 이동하고, 특정 논리 단위로 진입하며, 현재 관측 상태를 얻는다는 추상 연산입니다. 반면 페이지가 만들어지는 방식은 서로 다릅니다. 이 차이는 객체지향적인 클래스 구분보다 대수적 데이터 타입에 가깝습니다. 공통 연산은 두 타입 모두에 정의하되, 타입마다 닫혀 있는 연산은 각 의미 영역 안에서만 수행되어야 합니다.

이 구분을 명확히 한 뒤에는 반응형 문서와 그래픽 문서를 하나의 퍼블리셔에서 다루면서도 서로의 규칙이 침범하지 않았습니다. 같은 버튼이 보인다는 이유로 같은 계산을 공유하지 않았고, 같은 출력 형식을 가진다는 이유로 같은 문서라고 단정하지도 않았습니다. 사용자에게는 하나의 읽기 경험이지만 내부 수학은 두 개의 올바른 의미론을 유지하도록 완성했습니다.

Constraint geometry

미리보기의 페이지 배치는 고정된 크기를 고르는 문제가 아니라 제약 아래에서 목적함수를 최적화하는 문제였습니다. 화면의 가용 영역을 \(W\times H\), 페이지의 폭과 높이를 \(w,h\)라고 하면 기본 목적은 페이지 면적 \(wh\)를 크게 만드는 것입니다. 동시에 외곽 여백, 탐색 영역, 페이지 간격, 종횡비, 최소 가독 폭과 같은 부등식 제약을 모두 만족해야 합니다.

따라서 가능한 배치의 집합은 \(\mathcal{F}=\{(w,h):g_i(w,h)\leq0\}\)로 나타낼 수 있고, 실제 배치는 \(\arg\max_{(w,h)\in\mathcal{F}}wh\)로 볼 수 있습니다. 종횡비가 고정되면 자유도는 하나로 줄어들지만, 단일 페이지와 펼침면은 제약식 자체가 다릅니다. 화면 폭이 어느 경계를 지날 때 최적해의 위상이 바뀌는 이유도 여기에 있습니다.

레이아웃 모드의 전환은 단순한 조건문이 아니라 piecewise optimization입니다. 각 구간에서는 해가 연속적으로 움직이지만, 활성 제약이 바뀌는 지점에서는 다른 해 공간으로 넘어갑니다. 이 경계에서 페이지가 튀거나 탐색 영역을 침범하지 않게 하려면 각 구간의 목적함수뿐 아니라 경계에서의 연속성까지 함께 봐야 했습니다.

모바일과 데스크탑도 별개의 디자인을 억지로 이어 붙인 것이 아닙니다. 동일한 의미 변수들이 서로 다른 feasible region에서 최적해를 갖는 것으로 보았습니다. 그래서 화면이 바뀌어도 문서의 내용과 순서는 그대로이고, 오직 기하학적 해만 새 제약에 맞게 이동합니다. 퍼블리셔의 반응형 미리보기는 이 제약계가 안정적으로 수렴하도록 정리했습니다.

Aspect-ratio fitting

고정판형 문서는 원본 좌표계의 종횡비를 보존해야 합니다. 원본 폭과 높이를 \(a,b\), 가용 영역을 \(W,H\)라고 하면 균일 배율은 \(s=\min(W/a,H/b)\)가 되고, 결과 크기는 \((sa,sb)\)가 됩니다. 이것은 단순한 contain 계산처럼 보이지만 여백과 보조 영역이 들어오면 실제 가용 영역이 먼저 정확히 정의되어야 합니다.

안쪽 여백을 \(p_x,p_y\)라고 두면 비율을 맞춰야 하는 대상은 외곽 상자가 아니라 \((w-p_x,h-p_y)\)입니다. 즉 \((w-p_x)/(h-p_y)=a/b\)를 만족하면서 전체 상자가 가용 영역 안에 들어가야 합니다. 펼침면에서는 같은 제약을 가진 두 페이지와 페이지 사이 간격까지 하나의 합성 도형으로 다뤄야 하므로, 폭 제약과 높이 제약에서 얻은 후보 중 더 엄격한 해를 선택하게 됩니다.

중앙 정렬도 화면 전체의 중앙을 사용하는 문제가 아닙니다. 보조 패널이 차지한 영역을 제외한 뒤 남은 feasible rectangle의 중심을 구해야 합니다. 어떤 방향에 보조 영역이 있느냐에 따라 기준 원점이 달라지지만, 계산 자체는 남은 영역에 대한 아핀 변환으로 통일할 수 있습니다. 평행이동과 균일 확대를 분리하면 비율 보존과 위치 보존을 각각 검증할 수 있습니다.

이 기하 모델을 세로형, 가로형, 정방형 원본과 단일·펼침 조건에 반복 적용했습니다. 가장자리의 반올림 오차까지 포함해 원본이 잘리거나 중심이 편향되지 않는 것을 확인했고, 고정판형 문서는 어떤 화면에서도 자신의 좌표계를 잃지 않게 되었습니다.

Reading order

책의 읽기 순서는 파일 이름의 정렬과 같지 않습니다. 논리적 선후 관계, 독자에게 보이는 순서, 현재 화면이 참조하는 위치는 서로 다른 좌표계입니다. 원본이 가진 순서를 전순서 \((S,<)\)로 보고, 사용자의 재배열과 비공개 선택을 그 위에 작용하는 순열과 부분집합 선택으로 해석했습니다.

원소 집합이 \(S\), 사용자가 선택한 공개 부분집합이 \(V\subseteq S\), 재배열이 순열 \(\pi\in\mathrm{Sym}(S)\)라면 실제 읽기 순서는 \(\pi(S)\)를 \(V\)에 사영한 결과입니다. 숨김은 원소의 삭제가 아니라 관측 집합에서의 제외이고, 재배열은 원소의 정체성을 바꾸지 않는 순서 변환입니다. 이 둘을 구분해야 나중에 다시 공개하거나 원본이 갱신되어도 같은 장을 찾을 수 있습니다.

원본이 바뀌면 두 순서 집합 사이의 대응을 다시 계산해야 합니다. 배열 위치로 대응하면 앞부분에 원소 하나가 들어오는 순간 이후의 모든 관계가 틀어집니다. 반면 안정된 의미 식별을 기준으로 부분 동형사상을 구성하면 공통 원소의 관계는 보존하고, 새 원소와 사라진 원소만 경계에서 처리할 수 있습니다. 이것은 단순 병합보다 순서 구조의 보존에 가까운 문제입니다.

첫 진입과 다음·이전 이동도 같은 순서 공간 위에 놓았습니다. 화면 버튼의 배열, 현재 위치, 실제 문서의 논리 좌표가 하나의 순서 사상으로 연결되면 어느 쪽에서 이동해도 결과가 같습니다. 표지 숨김, 장 재배열, 중간 삽입을 반복해도 읽기 순서가 깨지지 않는 이유는 이 순서론적 불변식을 끝까지 유지했기 때문입니다.

Navigation projection

챕터 탐색 UI는 읽기 순서의 복사본이 아니라 순서 공간을 화면에 사영한 결과입니다. 세로 목록과 가로 목록은 서로 다른 데이터 구조가 아니라 같은 순열을 서로 다른 축에 배치한 것입니다. 방향 벡터를 \(u\)라고 하면 각 항목의 위치는 스칼라 사영 \(x_i\cdot u\)로 비교할 수 있고, 화면 방향이 달라져도 순서의 대수는 바뀌지 않습니다.

기기별 표현값은 하나의 수치를 억지로 확대하거나 축소하지 않았습니다. 환경 집합 \(E\)에 대해 표현 상태를 함수 \(s:E\to V\)로 두면 모바일과 데스크탑은 같은 상태의 축약판이 아니라 서로 다른 정의역 원소에 대응하는 값입니다. 공통값은 명시적으로 공유하고, 환경에 종속적인 값은 각각의 좌표에 남겨 두는 편이 훨씬 안정적입니다.

항목이 매우 많을 때는 모든 원소를 같은 시각적 밀도로 노출하는 것이 오히려 탐색 비용을 키웁니다. 필요한 정보량을 \(I\), 한 화면이 수용하는 정보량을 \(B\)라고 하면 탐색 인터페이스는 \(I/B\)를 줄이기 위한 압축 표현이 필요합니다. 현재 위치와 경계, 직접 이동처럼 정보 가치가 높은 연산만 남기면 원소 수가 커져도 인지 부하는 거의 일정하게 유지됩니다.

이 원칙을 적용해 문서의 규모와 화면 방향이 달라져도 탐색 의미가 변하지 않도록 만들었습니다. 표현은 압축되거나 방향을 바꿀 수 있지만, 선택과 이동이 작용하는 순서 공간은 동일합니다. 퍼블리셔의 챕터 편집은 UI 효과가 아니라 순열과 사영을 다루는 안정된 도구가 되었습니다.

Render convergence

렌더링에는 글꼴, 이미지, 레이아웃 측정과 사용자 입력처럼 서로 다른 시간축이 섞입니다. 이 사건들은 하나의 완전한 시간순서로 발생하지 않습니다. 어떤 사건은 다른 사건보다 먼저여야 하지만 서로 독립인 사건도 많습니다. 따라서 실행을 단일 시각이 아니라 부분순서 \((E,\prec)\)로 보고, 결과에 영향을 주는 happens-before 관계만 보존하는 편이 정확합니다.

문제는 오래된 계산이 늦게 끝나 최신 상태를 덮는 경우입니다. 상태 버전을 \(v), 계산 결과가 출발한 버전을 \(v_r\)라고 하면 결과를 반영할 수 있는 조건은 최소한 \(v_r=v\)여야 합니다. 중간 상태를 모두 화면에 드러낼 필요도 없습니다. 여러 변화가 짧은 시간에 겹치면 최종 상태가 요구하는 계산만 남기고, 관측 가능한 결과가 최신 의도와 일치하게 하면 됩니다.

렌더 완료도 하나의 비동기 작업이 끝났다는 뜻이 아닙니다. 레이아웃 함수 \(L\)을 반복 적용했을 때 \(L(x)=x\)에 가까운 고정점에 도달하고, 필수 자원이 관측 가능한 상태가 되었을 때 비로소 화면을 노출할 수 있습니다. 다만 외부 자원을 무한히 기다릴 수는 없으므로 수렴 조건과 유한 대기 조건을 함께 둬야 합니다. 완전성을 기다리되 시스템의 활성을 포기하지 않는 것입니다.

이 부분을 특정 실행 순서에 의존하지 않게 만들었습니다. 사건의 도착 순서가 조금 달라도 최종 상태가 같고, 빠르게 설정을 바꾸거나 화면 크기를 연속으로 바꿔도 마지막 의도만 정확히 남습니다. 렌더링의 안정성은 속도가 아니라 부분순서와 버전 불변식을 지킨 결과였습니다.

Temporal identity

원본이 수정된 뒤에도 같은 게시 문서라고 말할 수 있으려면 정체성과 내용의 시간을 분리해야 합니다. 시각 \(t\)에서 문서의 값은 \(V(t)\)로 달라질 수 있지만, 문서를 가리키는 정체성 \(I\)는 유지됩니다. 동일성을 값의 완전한 일치로 정의하면 수정할 때마다 새 문서가 되고, 동일성을 이름만으로 정의하면 서로 다른 문서가 충돌합니다.

그래서 문서를 시간에 따라 변하는 궤적 \((I,V_t)\)로 보았습니다. 갱신은 정체성을 바꾸는 연산이 아니라 같은 정체성에 새로운 유효 상태를 대응시키는 연산입니다. 표현 설정과 읽기 순서처럼 원본과 독립적으로 유지되어야 하는 값은 이 궤적 안에서 보존되고, 원본에서 다시 유도해야 하는 값만 새로운 상태에 맞춰 계산됩니다.

여러 에디터에서 만들어진 결과도 출처와 결과 사이의 provenance graph로 해석했습니다. 중요한 것은 구체적인 왕복 경로가 아니라 어떤 결과가 어떤 원본의 어느 시점에서 유도되었는지입니다. 이 관계를 방향 그래프로 두면 갱신 권한과 영향 범위를 설명할 수 있고, 순환 참조나 출처가 불분명한 변경도 구조적으로 차단할 수 있습니다.

흐름형과 고정판형, 세로와 가로 판형, 단일과 펼침, 모바일과 데스크탑, 장의 숨김과 재배열, 연속된 상태 변경과 원본 갱신을 모두 반복 검수했습니다. 각 조건에서 내용 동등성, 순서 동등성, 레이아웃 제약과 상호작용 전이가 일관되게 보존되는 것을 확인했습니다. 책의 구조를 웹 읽기 경험으로 편집하는 퍼블리셔 엔진은 완전하게 구현되고 안정화되었습니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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