디자인 노트
접힌 자리가 책등이 되기까지
모든 폴더블 폰에는 한가운데 선이 하나 있습니다. 대부분의 앱에게 그것은 피해 가야 할 무언가입니다. 하지만 책에게는 세상에서 가장 자연스러운 것입니다. 책에는 언제나 그 선이 있었으니까요. Tomelet의 리더가 접힌 자리를 책등으로 다루게 된 과정과, 그 뒤에 있는 디자인 규칙을 소개합니다.
무료, 계정도 필요 없습니다. 펼침면 보기는 무료 리더에 포함되어 있습니다.
문제: 늘어난 폰 페이지
폴더블을 펼치면 폰 모양으로 만든 앱은 그저 옆으로 넓어질 뿐입니다. 줄은 읽기에는 너무 길어지고, 본문은 접힌 자리를 가로지르며, 버튼이 접힌 자리 위에 놓이기도 합니다. 폰을 닫으면 화면이 다시 만들어져, 읽던 곳에서 한 페이지나 한 장쯤 벗어나 버립니다.
Apple은 iPhone Duo와 함께 디자인 가이드라인을 발표했고, Android에는 폴더블을 위한 자체 가이드라인이 있습니다. 둘은 다른 점보다 같은 점이 많고, Tomelet은 하나의 리더로 둘 다 따릅니다. iPhone Duo에서도, Galaxy Z Fold에서도. 다섯 가지 규칙이 그 모습을 만들었습니다.
1. 접힌 자리는 예약된 영역
Apple은 접힌 자리를 예약된 영역, 즉 앱이 비워 두어야 할 화면의 일부라고 부릅니다. Android는 접힌 자리가 정확히 어디인지 앱에 알려 주고, Tomelet은 두 페이지 사이의 안쪽 여백을 바로 그곳에 두며, 탭 영역, 버튼, 선택 핸들은 그곳에서 멀리 둡니다. 접힌 자리를 가로지르는 펜 획은 두 페이지로 나뉘므로, 각 페이지는 자기 몫의 손글씨를 간직합니다.
iPhone Duo에서는 Tomelet을 만드는 데 쓰인 툴킷인 Flutter가 아직 접힌 자리의 위치를 앱에 전달하지 않습니다(flutter/flutter#192515). 그래서 Tomelet은 안쪽 여백을 화면 가운데에 둡니다.
바로 이것이 접힌 자리가 책등이 되는 단계입니다. 인쇄된 책에서도 안쪽 여백에는 아무것도 인쇄되지 않습니다. 그곳은 두 페이지가 만나는 자리입니다.
2. 접는다고 떠나는 것은 아니다
Apple은 기기를 열고 닫는 동안에도 끊김 없는 경험을 요구합니다. Samsung은 앱이 스크롤 위치와 입력 중인 텍스트를 유지하도록 요구합니다. Tomelet은 접기를 화면 크기의 변화로 다룰 뿐, 결코 화면 이동으로 다루지 않습니다.
페이지 번호로는 이를 견딜 수 없습니다. 커버 화면은 다른 크기로 한 페이지를 보여 주므로, 접을 때마다 책의 페이지 수가 달라집니다. 그래서 Tomelet은 읽던 자리를 본문 속 위치, 즉 왼쪽 페이지의 첫 글자로 기억합니다. 책을 다시 배치한 뒤 그 글자가 있는 페이지를 열고, 새 화면이 준비될 때까지 이전 화면을 그대로 띄워 둡니다. 강조 표시, 메모, 손글씨는 단어에 고정되어 있어 단어와 함께 움직입니다.
아무것도 다시 열리지 않고, 광고도 나오지 않습니다. 접는다고 책 밖으로 나가는 일은 없습니다.
3. 회전이 아니라 크기
iPhone Duo의 안쪽 화면은 앱의 회전 잠금을 무시하고, Android 17도 큰 화면에서 똑같이 동작합니다. 그러니 폰을 어느 방향으로 들었는지로 레이아웃을 정할 수는 없습니다. Tomelet이 보는 것은 페이지가 쓸 수 있는 공간입니다. 각 페이지가 편안하게 읽힐 만큼이면 두 페이지, 그렇지 않으면 한 페이지. 같은 규칙이 태블릿에서도, 가로로 든 폰에서도, 데스크톱 창에서도 적용됩니다.
페이지를 짝짓는 방식은 사진 캐러셀이 아니라 인쇄물에서 왔습니다. 첫 페이지는 혼자, 그다음은 2–3, 4–5. 그래서 출판사가 디자인한 펼침면은 언제나 하나의 펼침면으로 나타납니다. 아랍어, 히브리어, 세로쓰기 일본어 책은 오른쪽에서 시작해 왼쪽으로 넘어갑니다. 방향을 지정한 고정 레이아웃 책에는 닫을 수 있는 한 줄짜리 안내가 표시될 뿐, 리더가 멋대로 폰 화면을 돌리는 일은 없습니다.
4. 자세가 바꾸는 것은 배치이지, 책이 아니다
Apple의 가이드라인은 힌지 각도가 “상호작용과 효과를 위한 것이며… 레이아웃을 위한 것이 아니다”라고 말합니다. Tomelet도 같은 생각이라, 힌지를 따라 움직이는 페이지 효과는 없습니다. Android에서 자세가 바꾸는 것은 책 주변의 구성입니다.
반쯤 펼쳐졌다고 알려 주는 Android 폴더블 기기를 책처럼 들면, 접힌 자리 양쪽에 한 페이지씩, 컨트롤은 바깥쪽 가장자리에 놓입니다. Android 폴더블 기기를 반쯤 펼쳐 탁자 위에 두면 페이지는 위층으로, 컨트롤은 아래층으로 옮겨 갑니다. 페이지 슬라이더, 목차, 메모, 보기 설정. Flex Mode의 아이디어를 Android의 리더 안에 그대로 담은 것입니다.
iPhone Duo에서 Tomelet은 어떤 각도에서도 펼친 책 레이아웃을 유지하며, Flutter가 힌지 상태를 앱에 전달하는 날을 맞을 준비를 마쳤습니다.
5. 키보드
키보드를 띄운 채 폰을 접어도, 입력하던 검색창이나 메모는 텍스트도, 포커스도, 커서 위치도 그대로 유지합니다.
화면을 나눠 쓸 때
다른 앱과 나란히, iPhone Duo의 Split View나 Android의 분할 화면에서 Tomelet은 한 페이지를 보여 주고, 접힌 자리의 위치를 짐작하지 않으며, 컨트롤을 바깥쪽 가장자리에 둡니다.
여백에 펜 한 자루
Apple이 Apple Pencil(USB-C)을 iPhone Duo의 두 화면 모두로 가져오고, Tomelet의 펜 도구는 그것을 맞을 준비가 되어 있습니다. EPUB에서도 PDF에서도 여백에 쓰고, 한 획으로 줄을 강조하고, 손가락으로 페이지를 넘기고 이동하고 확대하는 동안 Pencil로 필기합니다. 손글씨는 본문에 고정되어 있어, 접기로 페이지가 다시 배치되어도 여백 메모는 제 문단 옆에 남습니다. 접힌 자리를 가로질러 그은 획은 두 페이지로 나뉩니다.
만들지 않은 것
힌지 각도를 따라 움직이는 페이지 효과
손을 고쳐 잡을 때마다 페이지가 흔들려서는 안 됩니다.
iPhone에서 두 번째 Tomelet 창
화면을 잘 나눠 쓰는 창 하나면 충분합니다.
왜 책등인가
책은 세상에서 가장 오래된 접이식 화면입니다. 책등은 책이 굽는 곳이고, 아무것도 인쇄되지 않는 곳이며, 두 페이지가 만나기로 약속한 곳입니다. 접힌 자리를 책등으로 다룬 것은 엔지니어링 위에 덧씌운 은유가 아니었습니다. 책이 이미 그렇게 하듯 동작하는 리더로 가는 가장 짧은 길이었습니다.