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

EDITOR

CLASS

BLOG

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

새로운 형태로
담아내다.

새로운 형태의 콘텐츠

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

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

옵클 에디터 개발기: 고정된 페이지를 다시 흐르게 만들기

dev

텍스트힙이란 무엇인가

texthip

텍스트힙 이후 책읽기는 어떻게 달라졌나

texthip

텍스트힙은 글쓰기 문화를 어떻게 바꾸는가

texthip

창작자와 출판은 텍스트힙을 어떻게 활용할 수 있을까

texthip

...

22 옵클 에디터 개발기: 고정된 페이지를 다시 흐르게 만들기

오케스트레이션 구조를 완성한 뒤에는 레이아웃 에디터에서 끝난 작업을 EPUB 편집으로 다시 이어야 했습니다. 레이아웃 에디터는 종이와 같은 판형 안에서 글자와 이미지, 도형을 정확한 좌표에 놓는 도구입니다. 반면 EPUB 에디터가 다루는 본문은 독자의 화면과 글자 크기에 따라 계속 다시 흐릅니다. 같은 책을 만드는 두 편집기지만 공간을 해석하는 방식은 정반대에 가깝습니다.

고정된 페이지를 이미지로 만들어 넣는 것은 해결이 아니었습니다. 모양은 남아도 문단과 제목, 읽기 순서, 반응형 열과 미디어쿼리가 사라집니다. 반대로 좌표를 모두 버리고 글자만 이어 붙이면 조판에서 만들어 둔 위계와 간격, 나란히 놓인 구조와 시각적 리듬이 사라집니다. 필요한 것은 고정판형의 외형을 복사하는 일이 아니라, 그 외형을 만들어 낸 숨은 문서 구조를 다시 추정하는 일이었습니다.

레이아웃 결과를 리플로우 HTML과 CSS로 바꾸는 과정을 하나의 역문제로 정의했습니다. 페이지에서 관측되는 것은 최종 좌표이지만 EPUB에 필요한 것은 그 좌표 이전의 의미 구조입니다. 변환 결과는 EPUB 에디터에서 다시 문단을 고치고 스타일을 바꾸며 미디어쿼리를 확장할 수 있어야 했습니다. 고정된 결과를 끝점으로 두지 않고 다시 편집 가능한 흐름의 시작점으로 돌려놓는 작업이었습니다.

Inverse layout

일반적인 조판은 의미 구조 \(S\)와 환경 \(E\)를 받아 기하 결과 \(G\)를 만드는 전방 함수 \(L(S,E)=G\)로 볼 수 있습니다. 문단의 순서와 스타일, 열 구조를 입력하면 조판 엔진이 줄을 나누고 페이지를 만들며 각 요소의 좌표를 결정합니다. 고정판형에서 리플로우로 가는 과정은 반대로 관측된 \(G\)에서 가능한 \(S\)를 찾는 문제입니다.

하지만 \(L\)은 일반적으로 역함수를 갖지 않습니다. 서로 다른 HTML 구조와 CSS가 같은 화면을 만들 수 있고, 어떤 요소가 문서 흐름에 속하는지 장식으로 겹친 것인지도 좌표만으로 유일하게 결정되지 않습니다. 즉 \(L(S_1,E)=L(S_2,E)\)이면서 \(S_1\neq S_2\)인 경우가 얼마든지 존재합니다. 고정된 화면 하나만으로 원래 구조를 정확히 복원하는 문제는 본질적으로 ill-posed입니다.

그래서 해를 하나 맞히는 대신 목적함수를 세웠습니다. 후보 구조 \(S\)가 원본 기하를 얼마나 잘 재현하는지 나타내는 오차 \(d(L(S,E_0),G)\)와 구조의 복잡도 \(\Omega(S)\)를 함께 두면, 복원은 \(S^*=\arg\min_S\{d(L(S,E_0),G)+\lambda\Omega(S)\}\)가 됩니다. 원본과 비슷하기만 한 복잡한 절대배치보다 조금 단순하더라도 여러 화면에서 안정적으로 흐르는 구조를 선택하는 정규화입니다.

여기서 \(\lambda\)는 충실도와 일반화 사이의 균형입니다. 값이 너무 작으면 한 판형에만 맞는 좌표 복제품이 되고, 너무 크면 시각적 위계가 모두 평탄해집니다. 실제 변환은 특정 숫자 하나에 기대지 않고, 의미 보존과 반응형 안정성을 불변식으로 두어 이 균형을 잡았습니다. 역해가 유일하지 않다는 사실을 인정한 뒤에야 EPUB에 적합한 해를 일관되게 선택할 수 있었습니다.

순서의 복원

고정판형의 요소는 2차원 평면에 놓이지만 EPUB 본문은 기본적으로 1차원 순서를 가집니다. 페이지에서 위에 있다는 사실, 왼쪽에 있다는 사실, 같은 상자 안에 있다는 사실은 서로 다른 관계입니다. 단순히 \(y\) 좌표를 정렬한 뒤 \(x\) 좌표를 정렬하면 다단 편집, 캡션, 배경 상자와 겹침 요소가 있는 순간 읽기 순서가 쉽게 무너집니다.

요소 집합을 \(V\)라고 할 때 먼저 확실한 선후 관계만 간선으로 갖는 유향 그래프 \(D=(V,A)\)를 생각할 수 있습니다. \(u\prec v\)가 명확한 경우에만 \(u\to v\)를 두고, 같은 행이나 포함 관계처럼 순서를 바로 결정할 수 없는 요소는 추가 문맥이 생길 때까지 부분순서로 남깁니다. 읽기 순서는 이 DAG가 허용하는 여러 선형 확장 가운데 하나가 됩니다.

좋은 선형 확장은 기하학적 이동량만 최소화하지 않습니다. 제목 다음에 본문이 오고, 이미지와 캡션이 가까이 남으며, 같은 열의 내용이 다른 열로 튀지 않는 의미 비용까지 작아야 합니다. 이를 비용함수 \(C(\pi)=\alpha C_{geo}+\beta C_{semantic}+\gamma C_{discontinuity}\)로 보면 순서 복원은 가능한 순열 \(\pi\) 중 전체 비용이 작은 해를 찾는 문제가 됩니다.

원본의 DOM이나 편집 이력이 남아 있는 경우에는 그것을 강한 사전확률로 사용할 수 있고, 기하 정보만 남은 경우에는 정렬과 포함 관계가 더 큰 비중을 갖습니다. 중요한 것은 모든 문서를 같은 좌표 정렬 하나로 밀어 넣지 않는 것입니다. 명시된 의미와 관측된 기하를 함께 사용해 부분순서를 만들고, 모순 없는 선형 흐름으로 수렴시키도록 구성했습니다.

Interval geometry

페이지의 각 요소를 \(x\)축과 \(y\)축에 사영하면 두 개의 구간 \(I_x=[x_0,x_1]\), \(I_y=[y_0,y_1]\)를 얻습니다. 두 요소가 같은 행에 있는지, 같은 열에 있는지, 한 요소가 다른 요소를 감싸는지는 점 좌표 하나보다 이 구간 사이의 관계로 설명하는 편이 안정적입니다. 크기가 다른 글자와 이미지도 구간의 교집합과 포함 관계 안에서는 같은 언어로 비교할 수 있습니다.

구간 사이의 겹침 정도는 \(\mu(I_a\cap I_b)\)를 합집합이나 더 작은 구간의 길이로 정규화해 볼 수 있습니다. 다만 중요한 것은 특정 임계값이 아니라, 정규화된 관계가 확대와 축소에도 변하지 않는다는 점입니다. 같은 판형을 다른 배율로 관측해도 구간의 상대적 겹침과 순서는 유지됩니다. 좌표의 크기 대신 관계를 사용하면 변환이 화면 배율에 종속되지 않습니다.

세로 구간이 강하게 겹치는 원소들은 하나의 수평 구조가 될 가능성이 있고, 가로 구간이 비슷하게 정렬된 원소들은 같은 열의 흐름일 가능성이 있습니다. 이를 구간 그래프로 표현하면 꼭짓점은 요소가 되고, 특정 축에서 교차하는 요소 사이에 간선이 생깁니다. 연결 성분과 clique, 포함 트리는 각각 행 후보, 겹침 묶음, 컨테이너 후보를 설명하는 서로 다른 관점이 됩니다.

구간 그래프만으로 의미를 확정하지는 않았습니다. 장식 선처럼 넓게 가로지르는 요소는 거의 모든 것과 교차하고, 큰 배경은 페이지 전체를 하나의 연결 성분으로 만들 수 있습니다. 따라서 구간 관계는 구조를 결정하는 답이 아니라 후보 공간을 줄이는 기하학적 증거로 사용했습니다. 이 구분 덕분에 복잡한 페이지도 과도하게 하나의 묶음으로 합쳐지지 않았습니다.

무차원 좌표계

고정판형의 좌표는 특정 페이지 폭과 높이에 묶여 있습니다. \(x=120\)이라는 값은 페이지가 바뀌는 순간 의미를 잃지만, \(x/W\)는 전체 폭에서 어느 지점에 있는지를 계속 설명합니다. 리플로우 변환에서는 길이 자체보다 길이의 비를 보존해야 했습니다. 좌표를 무차원 수로 바꾸는 순간 판형의 크기와 구조의 비례 관계를 분리할 수 있습니다.

버킹엄 \(\Pi\) 정리의 관점에서 보면 폭, 높이, 글자 크기, 간격처럼 차원을 가진 변수들은 독립적인 무차원 조합으로 정리할 수 있습니다. 요소 폭 \(w\)는 \(w/W\), 세로 간격 \(g\)는 본문 글자 크기 \(f\)에 대한 \(g/f\), 테두리 굵기 \(b\)는 요소 크기에 대한 \(b/\min(w,h)\)로 볼 수 있습니다. 어떤 기준량으로 나누느냐가 CSS 단위 선택의 의미가 됩니다.

가로 폭과 열의 위치는 컨테이너 폭에 반응해야 하므로 비율 좌표가 자연스럽고, 문단 간격과 안쪽 여백은 글자 확대에 함께 반응해야 하므로 타이포그래피 기준 좌표가 자연스럽습니다. 모든 값을 하나의 상대 단위로 바꾸는 것이 아니라, 각 값이 어떤 스케일 군의 작용에 대해 공변해야 하는지를 보고 기준을 달리했습니다.

이렇게 얻은 변환은 스케일 equivariance를 가져야 합니다. 입력 판형을 \(k\)배 확대해도 무차원 구조는 같고, 결과를 다른 화면에 놓았을 때는 그 화면의 기준량에 따라 다시 차원을 얻습니다. \(T(kG)=T(G)\)에 가까운 구조 표현과 \(R(T(G),kE)=kR(T(G),E)\)에 가까운 렌더 관계를 목표로 삼았습니다. 고정 좌표를 지운 것이 아니라 좌표가 담고 있던 비례 법칙을 보존한 것입니다.

Typography metric

텍스트 상자의 외곽 사각형과 독자가 실제로 보는 글자의 경계는 다릅니다. 글자는 baseline을 기준으로 놓이고, 위에는 ascender, 아래에는 descender가 있으며, line-height에는 글리프 바깥의 leading이 포함됩니다. 상자의 기하학적 중앙에 글자를 놓아도 시각적으로 아래쪽에 처져 보일 수 있는 이유입니다.

본문 글자 크기를 \(f\), 행간을 \(\ell\), baseline 위치를 \(b\)라고 하면 한 줄의 시각 중심은 단순히 \(\ell/2\)가 아닙니다. 폰트의 x-height와 cap-height, ascender 비율을 반영한 보정항 \(\alpha f\)가 필요하고, 대략적인 모델은 \(c_{opt}=b-\alpha f\)처럼 쓸 수 있습니다. \(\alpha\)는 장식과 글자의 정렬을 설명하는 광학적 계수이지 임의의 픽셀 보정이 아닙니다.

문단 사이의 간격도 텍스트 상자 끝과 다음 상자 시작의 차이만으로 계산할 수 없습니다. 상자 안에 사용되지 않은 공간이 있거나 마지막 문단이 일부만 보이는 경우, 외곽 경계를 사용하면 실제보다 큰 공백이나 보이지 않던 문장이 리플로우 결과에 나타납니다. 필요한 것은 line box와 실제 내용이 차지한 시각적 support의 경계입니다.

빈 문단 역시 문자열 길이가 0이라는 이유만으로 모두 같은 의미를 갖지 않습니다. 의도적인 한 줄 여백, 편집 과정에서 생긴 빈 노드, 상자 밖으로 밀려 보이지 않는 내용은 서로 다릅니다. 타이포그래피의 위상과 계량을 함께 보아야 보존할 공백과 제거할 공백을 구분할 수 있습니다. 변환 뒤에도 제목과 본문, 캡션의 리듬이 유지된 이유는 상자보다 글줄의 기하를 기준으로 삼았기 때문입니다.

Overlap topology

고정판형에서는 요소가 겹치는 것이 자연스럽습니다. 배경색 상자 위에 제목이 놓이고, 얇은 선이 글자의 중앙을 지나며, 이미지 위에 캡션이 올라갈 수 있습니다. 리플로우에서는 모든 겹침을 절대배치로 옮길 수도 없고, 모든 요소를 세로로 풀어놓을 수도 없습니다. 겹침이 나타내는 의미를 먼저 분류해야 합니다.

요소가 차지하는 영역을 평면의 부분집합 \(A_i\subset\mathbb{R}^2\)로 보면 포함 \(A_i\subset A_j\), 교차 \(A_i\cap A_j\neq\varnothing\), 분리 \(A_i\cap A_j=\varnothing\)는 서로 다른 위상 관계입니다. 큰 영역이 작은 영역들을 포함하면서 시각적으로 뒤에 있다면 컨테이너일 가능성이 있고, 얇은 영역이 텍스트와 일부만 교차하면 장식일 가능성이 있습니다. 관계는 같아도 역할은 다를 수 있으므로 z-order와 의미 타입이 함께 필요합니다.

겹침 그래프의 모든 연결 성분을 하나의 절대배치 묶음으로 만들면 반응형 성질이 사라집니다. 반대로 간선을 모두 제거하면 원본의 합성 관계가 무너집니다. 따라서 어떤 간선은 집합의 포함 관계로 축약하고, 어떤 간선은 흐름과 독립적인 장식 관계로 남기며, 나머지는 순서 관계로 풀어야 합니다. 그래프의 간선을 삭제하는 것이 아니라 다른 종류의 관계로 재라벨링하는 과정입니다.

이 변환을 위상 보존으로 생각하면 화면 크기가 달라져도 지켜야 할 것이 분명해집니다. 정확한 교차 면적은 달라질 수 있지만 배경이 내용을 포함한다는 관계, 캡션이 이미지에 인접한다는 관계, 장식이 특정 제목과 함께 움직인다는 관계는 유지되어야 합니다. 좌표값의 보존보다 관계의 보존을 우선하면서 리플로우에서도 원본의 시각 문법이 무너지지 않게 했습니다.

Responsive state space

리플로우 문서의 환경은 화면 폭 하나로만 표현되지 않습니다. 폭 \(w\), 높이 \(h\), 방향 \(o\), 색상 선호 \(c\), 해상도 \(\rho\), 사용자가 정한 글자 배율 \(s\)를 모으면 환경은 \(e=(w,h,o,c,\rho,s)\)인 다차원 상태가 됩니다. 렌더 결과는 이 환경 공간 위에 정의된 함수 \(R(e)\)입니다.

모바일, 태블릿, 데스크탑은 기기 이름이라기보다 환경 공간을 나누는 부분집합입니다. \(E=E_1\cup E_2\cup E_3\)이고 각 영역 안에서 같은 레이아웃 제약이 활성화됩니다. 중요한 것은 분할점의 숫자 자체가 아니라, 어느 지점에서 기존 제약계가 더 이상 가독성과 구조를 동시에 만족하지 못하는가입니다. breakpoint는 디자인 관습보다 활성 제약이 바뀌는 임계점에 가깝습니다.

예를 들어 여러 열의 최소 가독 폭을 \(m_i\), 열 사이 간격을 \(g_j\)라고 하면 가로 배치가 가능한 조건은 \(w\geq\sum_i m_i+\sum_j g_j\)처럼 나타낼 수 있습니다. 조건을 만족하지 못하는 순간 열을 줄이거나 세로 흐름으로 바꾸는 새로운 위상 상태가 필요합니다. 연속적으로 크기만 줄이는 문제와 구조 자체를 바꾸는 문제를 분리해야 합니다.

각 영역 안에서는 크기와 간격이 연속적으로 변하고, 영역 경계에서는 행과 열의 관계가 이산적으로 바뀝니다. 따라서 반응형 레이아웃은 하나의 매끄러운 함수가 아니라 구간별로 매끄러운 piecewise function입니다. 경계의 양쪽에서 읽기 순서와 의미적 인접성이 유지되도록 상태 전이를 설계했고, 고정판형의 한 화면을 여러 환경에서 유효한 함수로 확장할 수 있었습니다.

Media query algebra

미디어쿼리는 CSS 문법이기 전에 환경 집합에 대한 술어입니다. 각 쿼리 \(q_i:E\to\{0,1\}\)는 어떤 환경에서 규칙이 활성화되는지를 결정하고, 논리곱은 교집합, 논리합은 합집합, 부정은 여집합에 대응합니다. 여러 쿼리가 만드는 구조는 환경 공간 위의 Boolean algebra입니다.

안정적인 반응형 문서는 쿼리 영역이 전체 목표 공간을 덮어야 하고, 의도하지 않은 공백이 없어야 합니다. \(\bigcup_i E_i=E\)라는 완전성과 함께, 겹치는 영역 \(E_i\cap E_j\)에서는 어떤 규칙이 우선하는지 결정되어야 합니다. 쿼리가 서로 배타적이면 해석이 단순하지만, 색상 모드와 화면 폭처럼 직교하는 축은 의도적으로 교차해야 합니다.

폭 구간 \(W_i\)와 색상 상태 \(C_j\)를 함께 다루면 환경은 곱집합 \(W_i\times C_j\)로 나뉩니다. 모바일 라이트, 모바일 다크, 넓은 화면 라이트와 다크는 서로 다른 파일이 아니라 같은 상태 함수의 셀입니다. 한 축에서 공통인 규칙은 상위 항으로 묶고, 교차 셀에만 필요한 차이만 남기면 규칙 수를 줄이면서도 모든 조합을 표현할 수 있습니다.

미디어쿼리 변환은 관측된 한 판형에서 임의의 규칙을 만들어 내는 일이 아니었습니다. 어떤 관계가 모든 환경에서 불변인지, 어떤 관계가 폭 구간에서만 달라지는지, 어떤 속성이 색상 축에만 의존하는지를 분해하는 작업이었습니다. 환경 술어의 정의역을 명확히 하니 상충하는 규칙과 도달할 수 없는 조건을 검출할 수 있었고, 여러 리더기에서도 예측 가능한 반응형 결과를 만들 수 있었습니다.

Constraint-preserving CSS

고정판형의 열을 CSS의 흐름으로 옮길 때 중요한 것은 개별 폭보다 전체 제약입니다. \(n\)개의 열이 한 행을 이룬다면 비율 \(p_i\)는 \(p_i\geq0\), \(\sum_{i=1}^{n}p_i=1\)인 simplex 위에 놓입니다. 간격과 여백이 있다면 이들이 차지하는 몫을 먼저 제외한 뒤 남은 영역에서 열 비율을 정규화해야 합니다.

하지만 모든 열이 고정 비율을 가져야 하는 것은 아닙니다. 제목 글자처럼 줄어들면 안 되는 내용은 자신의 min-content 제약을 갖고, 장식 선처럼 남은 공간을 채우는 요소는 탄력적인 자유변수가 됩니다. 이때 레이아웃은 \(\sum_i w_i+g=W\)를 만족하면서 각 \(w_i\)의 하한과 상한을 지키는 선형 제약계가 됩니다. 고정값을 복사하기보다 어떤 변수가 고정되고 어떤 변수가 여유 공간을 흡수하는지 복원해야 합니다.

CSS cascade도 하나의 순서 구조입니다. 같은 속성에 여러 선언이 도달하면 origin, 중요도, specificity와 source order의 사전식 순서로 승자가 정해집니다. 미디어쿼리 변환에서 규칙을 많이 만드는 것보다, 공통 규칙과 환경별 규칙이 이 순서 안에서 충돌하지 않도록 배치하는 일이 중요했습니다. 같은 화면에서 두 제약이 동시에 활성화되어도 결과가 우연한 작성 순서에 좌우되어서는 안 됩니다.

변환된 CSS는 원본 수치를 나열하는 기록이 아니라 제약계의 기술이 되었습니다. 넓은 화면에서는 열이 같은 행을 공유하고, 폭이 부족해지면 의미 순서를 유지한 채 다른 배치 상태로 넘어가며, 글자 크기가 바뀌면 여백도 타이포그래피 비율을 따라 움직입니다. 한 판형의 좌표를 여러 환경에서 다시 풀 수 있는 방정식으로 바꾼 셈입니다.

Visual fidelity

모든 시각 요소를 같은 방식으로 변환할 수는 없습니다. 텍스트는 검색과 접근성, 재편집 가능성을 위해 의미 구조로 남는 편이 좋고, 단순한 기하 도형은 CSS가 가진 제약으로 표현할 수 있습니다. 반면 복잡한 곡선과 합성 효과는 억지로 의미 구조를 추정할수록 원본과 멀어질 수 있습니다. 변환 방식의 선택 자체가 최적화 문제였습니다.

후보 표현 \(r\)의 비용을 \(J(r)=\alpha D_{visual}(r)+\beta D_{semantic}(r)+\gamma C(r)\)로 둘 수 있습니다. \(D_{visual}\)은 원본과의 시각적 왜곡, \(D_{semantic}\)은 텍스트성과 구조를 잃는 비용, \(C\)는 여러 리더기에서 실행하기 위한 복잡도입니다. 한 항만 최소화하면 스크린샷이나 과도하게 복잡한 DOM 같은 극단으로 치우칩니다.

리플로우에 기여하는 내용은 의미 표현을 우선하고, 구조적 이점이 없는 복잡한 시각 요소는 안정된 시각 표현으로 남기는 편이 전체 비용을 낮춥니다. 중요한 것은 어떤 내부 판정으로 나뉘는지를 공개하는 일이 아니라, 변환 뒤에도 독자가 보아야 할 형상과 편집자가 다뤄야 할 의미가 각각 보존된다는 점입니다. 표현 수단은 달라도 문서에서 맡은 역할은 유지되어야 합니다.

투명도와 종횡비, 회전과 잘림처럼 시각 결과에 직접 영향을 주는 값도 같은 왜곡 함수 안에서 검토했습니다. 작은 오차가 누적되면 한 요소의 차이가 아니라 페이지 전체 리듬의 차이가 됩니다. 의미 구조를 살린다는 이유로 시각 충실도를 가볍게 보지 않았고, 시각 충실도를 지킨다는 이유로 모든 것을 평면 이미지로 만들지도 않았습니다.

Reflow document

변환의 결과는 완성된 화면이 아니라 HTML 구조, CSS 제약과 필요한 자원이 닫힌 하나의 리플로우 문서입니다. HTML은 읽기 순서와 포함 관계를 표현하고, CSS는 환경에 따라 풀리는 기하 제약을 표현합니다. 자원은 이 두 구조가 참조하는 도달 가능성의 폐포를 이룹니다. 세 요소가 함께 있어야 다른 환경에서도 같은 문서 의미를 재구성할 수 있습니다.

이 문서가 EPUB 에디터로 돌아온 뒤에는 일반 본문과 같은 편집 가능성을 가져야 했습니다. 문단은 다시 고칠 수 있고, 제목과 본문 스타일을 바꿀 수 있으며, 열 구조와 미디어쿼리도 EPUB 전체의 규칙 안에서 확장할 수 있습니다. 레이아웃 에디터의 결과를 닫힌 산출물로 삽입한 것이 아니라 다음 편집 단계가 읽을 수 있는 중간표현으로 만든 것입니다.

컴파일러 이론으로 보면 레이아웃 문서와 EPUB 본문 사이에 공통 IR을 둔 것과 비슷합니다. 원본 편집기의 내부 표현을 그대로 노출하지 않고, downstream 편집기가 필요로 하는 의미와 제약만 전달합니다. 이 경계가 안정적이면 양쪽 편집기의 내부 구조가 달라져도 변환된 문서의 의미 계약은 유지됩니다.

또한 미리보기와 실제 전달 결과가 서로 다른 계산을 거치지 않도록 동일한 의미 상태를 기준으로 검증했습니다. 사용자가 리플로우 화면에서 확인한 문단 순서와 열 배치, 이미지 비율과 반응형 변화가 EPUB 편집으로 이어진 뒤에도 같아야 합니다. 관측한 결과와 편집할 결과가 하나의 중간표현에서 나오는 구조로 정리했습니다.

검증과 수렴

변환 검수는 특정 예제 몇 장을 눈으로 비교하는 데서 끝내지 않았습니다. 모든 문단이 정확히 한 번 읽기 흐름에 들어가는지, 읽기 순서 그래프에 cycle이 없는지, 열 비율의 합이 가용 영역을 넘지 않는지, 자원 참조가 폐포 안에 있는지 같은 성질을 먼저 확인했습니다. 결과의 모양 이전에 구조적 불변식을 검사했습니다.

반응형 검수에서는 환경 공간을 여러 지점에서 표본화했습니다. 각 폭 구간의 내부뿐 아니라 활성 제약이 바뀌는 경계의 양쪽을 확인하고, 방향과 색상 상태, 글자 배율을 교차시켰습니다. 한 축을 바꿨을 때 독립인 다른 축의 상태가 보존되는지, 겹치는 미디어 술어가 의도한 우선순서로 계산되는지도 함께 검증했습니다.

타이포그래피와 기하 검수에서는 제목과 본문, 다단 구조, 이미지와 캡션, 배경 컨테이너, 장식 요소와 복잡한 시각 자료를 반복 변환했습니다. 화면이 좁아져도 텍스트가 잘리지 않고, 열이 바뀌어도 의미 순서가 유지되며, 글자 크기를 높여도 간격과 장식의 관계가 무너지지 않는 것을 확인했습니다. EPUB 에디터에서 문장을 다시 편집한 뒤에도 리플로우 구조와 미디어쿼리는 정상적으로 재계산되었습니다.

고정판형의 2차원 좌표를 읽기 가능한 부분순서로 복원하고, 길이를 무차원 제약으로 바꾸며, 환경 공간을 미디어쿼리의 Boolean algebra로 확장하는 전체 변환은 완전하게 구현되고 안정화되었습니다. 레이아웃 에디터에서 만든 책은 이제 고정된 페이지에 머물지 않고, 구조와 시각적 의도를 보존한 HTML과 CSS가 되어 EPUB 에디터의 다음 편집 과정으로 정확하게 이어집니다.

목록으로

저작권 고시

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

HOME

FAQ

이용 약관

개인정보 이용방침

help@opkle.app
010-2747-3403

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

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

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

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