decksmith

6월에 레이아웃에 남긴 메모 8개 중 4개가 "안 맞는다"는 얘기였습니다

7월 말에 6월에 적어 둔 레이아웃 수정 메모를 다시 열어 봤습니다. 메모는 8개였고, 그중 4개가 같은 불만이었습니다. 두 요소가 서로 안 맞는다는 것입니다. 왼쪽 로고와 텍스트, 오른쪽 영역과 왼쪽 영역, 가운데에서 퍼지는 선과 점, 이미지와 텍스트 줄이 한 메모씩 차지하고 있었습니다.

그중 두 개를 고친 과정이 남아 있어서 적어 둡니다.

오른쪽 영역이 왼쪽보다 낮아 보인다는 메모는 원인이 단순했습니다. 바깥 행이 두 열에 위 여백을 똑같이 주고 있었는데, 오른쪽 열이 같은 여백을 한 번 더 주고 있었습니다. 하나를 지우니 두 열의 윗선이 같은 위치(25.25px)에서 시작했습니다.

붉은 선은 왼쪽 라벨의 윗선입니다. 수정 전에는 오른쪽 제목이 49.00px에서 시작해 이 선보다 약 24px 아래였습니다.

이미지와 텍스트 줄을 맞추라는 메모는 쉽게 안 풀렸습니다. 적어 둔 문장이 "안 맞춰도 되나? 맞추는 게 좋을 것 같은데"였으니 저도 확신이 없었던 모양입니다. 브라우저에서 재 보니 이미지 상자와 텍스트 상자의 윗선은 y=375.86으로 정확히 같았습니다. 그런데 눈으로 보면 그림이 낮았습니다. 텍스트는 줄 간격 때문에 첫 글자의 윗선이 상자보다 아래에서 시작하고, 그림에는 그런 간격이 없기 때문입니다. 그래서 일단 그림을 14px 올렸습니다(margin-top: -14px). 다만 14px은 그때 커밋에 적어 둔 눈대중 값이고, 이번에 다시 재 보니 글자 윗선은 상자보다 6에서 8px 정도 아래였습니다. 그렇다면 14px은 과하게 올린 값일 수 있습니다.

이 수정이 맞는지는 아직 모르겠습니다. 상자 기준으로 맞추면 숫자는 깔끔한데 눈에는 틀려 보이고, 글자 기준으로 맞추면 눈에는 맞는데 값에 마이너스 보정이 붙습니다. 이미지와 텍스트 상자를 나란히 놓을 때 윗선을 상자에 맞추시는지 첫 글자에 맞추시는지 궁금합니다.

AI가 만든 슬라이드는 늘 같은 자리에서 틀립니다

레이아웃 167종을 1920×1080으로 전부 렌더링해서 자동 검사하는 작업을 하고 있습니다. 캔버스를 넘어간 요소, 잘린 텍스트, 푸터를 침범한 콘텐츠, 겹친 요소, 가려진 요소까지 다섯 가지를 봅니다.

그런데 이 작업을 반복하다 보니 예상하지 못한 것이 눈에 들어왔습니다. AI가 만든 발표자료는 못 만들어서 이상한 것이 아니라, 늘 똑같은 자리에서 틀립니다. 색도 괜찮고 정렬도 맞는데 세 번째 장쯤에서 "어디서 본 것 같다"는 느낌이 옵니다. 그 느낌의 정체를 일곱 가지로 정리했습니다.

1. 전부 가운데 정렬입니다. 표지도 가운데, 본문도 가운데, 마무리도 가운데입니다. 가운데 정렬은 읽는 사람에게 어디부터 보라는 지시를 주지 못합니다. 한 줄짜리 표지는 가운데가 맞지만, 정보 덩어리가 둘 이상이면 왼쪽 정렬에 크기 차이를 주는 편이 낫습니다.

2. 내용이 무엇이든 카드가 세 장입니다. 항목이 둘이어도 세 장, 다섯이어도 세 장입니다. 항목을 세기 전에 레이아웃부터 고른 결과입니다. 학습 데이터에 카드 세 장짜리 슬라이드가 압도적으로 많아서 그것이 되돌아 나오는 것으로 보입니다. 항목 수를 먼저 세고 그 수에 맞는 배치를 고르면 절반은 해결됩니다.

3. 제목이 문장입니다. "데이터 기반 접근으로 고객 만족도를 개선했습니다"는 제목이 아니라 발표 대본입니다. 제목은 청중이 0.5초에 읽는 표지판입니다. 문장이 되는 순간 읽는 데 시간이 들고 발표자의 말과 경쟁합니다. 명사구로 줄이고 숫자를 앞에 놓는 편이 낫습니다. "만족도 32% 상승"처럼요.

4. 숫자에 출처가 없습니다. 시장 규모가 90포인트로 박혀 있는데 몇 년 자료인지, 누가 만든 숫자인지 없습니다. 모델은 그럴듯한 숫자를 채우는 데 능하고 출처를 빠뜨리는 데도 똑같이 능합니다. 투자자 앞에서는 그 한 장이 덱 전체의 신뢰를 깎습니다. 틀린 숫자보다 빈 자리가 쌉니다.

5. 의미 없는 장식이 붙습니다. 텍스트 뒤 그라데이션, 모든 항목마다 아이콘. 장식은 시선을 한 곳으로 끌기 위해 있는 것이라, 전부 장식하면 아무것도 끌지 못합니다. 강조색은 하나만 골라 한 장에 한 번만 씁니다.

6. 텍스트가 잘리거나 넘칩니다. 제목이 두 줄로 넘어가면서 아래 카드를 밀어냅니다. 이것은 디자인 문제가 아니라 검증 문제입니다. 생성된 슬라이드는 대개 실제 크기로 한 번도 렌더링된 적이 없습니다. 코드로는 멀쩡하고 화면에서는 깨집니다.

7. 장끼리 서로 어긋납니다. 3장과 7장의 여백이 다르고 본문 크기가 중간에 바뀝니다. 한 장씩 만들면 매번 새로 결정하게 되고, 그때마다 값이 조금씩 달라집니다. 청중은 이 문제를 지적하지 못합니다. 대신 "덱이 좀 성의 없다"로 기억합니다.

일곱 개를 하나씩 고치는 것보다 만드는 순서를 바꾸는 편이 빠릅니다. 이 장이 해야 할 말을 먼저 정하고, 항목을 세고, 그 수에 맞는 배치를 고른 다음, 주어진 자리에 맞춰 글을 씁니다. 보통은 정반대로 합니다. 다 써 놓고 레이아웃을 찾은 다음 안 맞으면 글씨를 줄이거나 상자를 늘립니다. 1번부터 7번까지가 바로 그 순서에서 나옵니다.

검증된 배치를 먼저 놓으면 이 목록에서 다섯 개는 생길 기회조차 없다는 것이, 지금 만들고 있는 것의 전제입니다.

전문 보기

6,765개 조합을 전부 열어두고, 돈은 다른 데서 받기로 했습니다

AI가 발표자료를 만들 때 쓸 슬라이드 라이브러리 getdeck을 만들고 있습니다. 레이아웃 HTML 165종과 테마 CSS 41종이 서로 분리되어 있어서, 곱하면 6,765개 조합이 나옵니다.

지난주 내내 붙잡고 있던 고민은 "이걸 통째로 긁어가면 어쩌지"였습니다. 워터마크, 다운로드 쿼터, 파일별 지문까지 검토했는데 결국 하나도 넣지 않기로 했습니다. 그 과정을 남깁니다.

1. 막을 방법이 처음부터 없었습니다

저희가 파는 건 브라우저에서 렌더링되는 HTML과 CSS입니다. 이미지처럼 워터마크를 넣거나 저해상도 미리보기를 줄 수가 없습니다. 미리보기가 곧 원본이니까요.

게다가 레이아웃과 테마를 합쳐도 파일이 206개뿐입니다. 마음먹은 사람에게는 몇 분짜리 작업입니다.

2. 그래서 선을 "개별이냐 조합이냐"에 그었습니다

복사 가능한 텍스트 자산을 파는 서비스 13곳을 먼저 봤는데, 기술적으로 복제를 막는 곳이 한 군데도 없었습니다. getdesign.md는 마크다운 문서를 월 $99에 팔면서 카탈로그도 공개해 두고 있고, Cult UI는 코어를 MIT로 GitHub에 올려둔 채로 Pro를 팝니다. getdesign.md의 해자는 파일이 아니라 큐레이션 550개와 매달 5개씩 늘어나는 갱신 주기였습니다.

레이아웃 HTML은 각자 완결된 문서라, 한 장을 가져다 쓰는 데는 조립 규칙이 필요 없습니다. 그래서 한 장씩 받아 가는 건 가입만 하면 무제한으로 열어뒀습니다.

반대로 여러 장을 발표자료 한 벌로 엮으려면 두 가지가 더 필요합니다. 무엇을 어떤 순서로 고를지, 어떻게 이어붙일지. 이 정보는 파일 안에 없어서 전부 복사해 가도 얻을 수 없습니다. 파일이 아니라 판단을 팔기로 했습니다.

3. 사용량 한도까지 없앴습니다

처음엔 하루 몇 장까지라는 쿼터를 두려고 했는데 세 가지 이유로 걷어냈습니다.

• 쿼터로는 대량 복사를 못 막습니다. 206개 파일이라 하루 50장을 걸어도 사흘이면 끝납니다
• 아낄 원가가 없습니다. 월 1,000명이 써도 서버 비용이 $0.31 수준입니다
• 정상 사용자만 걸립니다. 발표자료 한 벌 만들면서 레이아웃 20~30장을 훑는 건 당연한 행동입니다

막지 못하는 걸 막는 시늉을 하느라 제대로 쓰는 사람만 불편하게 하고 있었습니다.

4. 아직 안 풀린 것

조합 제안이 유료 구간에 있다 보니, 무료 사용자가 세션 안에서 가치를 체감할 훅이 없습니다. 지금은 Pro 사용자가 만든 덱 링크를 받아 본 사람이 "나도 만들고 싶다"가 되는 경로에 기대고 있어서, 공유 링크는 로그인조차 받지 않습니다.

여기서 전환이 안 붙으면 조합 제안을 몇 회까지 체험하게 여는 안을 다시 꺼낼 생각입니다.

복사되는 자산을 파시는 분들은 이 선을 어디에 그으셨는지 궁금합니다. 저는 파일이 아니라 갱신 주기와 판단을 파는 쪽으로 정리했는데, 다르게 푸신 사례가 있으면 듣고 싶습니다.