할일·북마크 앱 디자인 이식 (클로드 목업 → 한선씨 벡터 렌더)

개요

CrownyAI 크라우니앱벡터 8앱 시리즈 중 할일(TODO)·북마크 2종을, 클로드 디자인 목업 (/Users/ef/Downloads/design_handoff_크라우니앱/할일-*.html, 북마크-*.html 8파일)의 색·좌표·문구를 그대로 복사해 _할일_벡터렌더/_북마크_벡터렌더(앱상주서버 벡터 IR)로 재구현했다. 데이터 로직(로드/저장/celdb/페이지 상태/열기요청 기록)은 무수정 — 렌더만 교체.

무엇을 했는지

1. 8개 목업 HTML을 python(parse_mockup.py)으로 파싱해 중첩 div의 절대좌표·색·폰트·

line-height를 전부 추출(중첩 absolute 좌표 누산 — CSS와 동일 방식).

1. 계약된 TEXT y 산식(lh:1.45 → top+반올림(0.225·fs), lh:Npx 라벨 → top+(N-fs)/2)을

모든 텍스트에 적용해 목업과 픽셀 단위로 일치하는 y좌표 도출.

1. _할일_벡터렌더/_북마크_벡터렌더를 전면 재작성(기존 균일스케일 S/OFFX/OFFY 관례는

유지) — 색·좌표·문구는 목업 그대로, HIT 액션 문자열은 기존 그대로 (할일추가/할일토글:N/할일완료:N/할일삭제:N/포커스:할일입력, 북마크추가/북마크열기:N/북마크삭제:N/북마크페이지이전·다음).

1. 재창작 없이 목업에 없는 요소는 추가하지 않음(선택 하이라이트 미이식, 분류 배지

색분기 삭제 등) — 상세 사유는 /Users/ef/.claude/design-port/크라우니앱벡터/이식노트.md.

검증 (증거)

• STRICT 컴파일: CROWNY_STRICT=1 hanseonc_high 앱상주서버.한선 — exit 0, 경고 0.
• 격리 시험서버: 포트 19822, CROWNY_DATA_DIR=/tmp/북마크이식시험(celdb 사본).
• 결정형 색·좌표·HIT 대조(diff_check.py): 8개 화면(할일 목록/빈목록×라이트/다크,

북마크 목록/빈목록×라이트/다크) 전부 PASS — 유실색 0, 신규색 0, HIT 개수 전부 일치 (할일 목록12/빈목록2, 북마크 목록13/빈목록4). 좌표는 IR 텍스트가 목업 절대좌표와 정수 그대로 일치(예: 할일 체크박스 ROUND 44 158 24 24 6 ...).

• 기능 회귀: 할일 포커스+타이핑+빈KEY(ENTER) 제출 → /tmp/할일목록.psv 신규행 확인.

북마크열기:0 → /tmp/북마크_열기요청.txt URL 기록 확인. 북마크삭제:0 → celdb 35→34줄 감소, 대상 레코드만 정확히 제거 확인.

• 시험 종료 후 공유 /tmp 상태(할일목록.psv 등) 원복, 시험 서버 kill, 라이브 무접촉.

관련 파일

• /Users/ef/CrownyBrowser/src/앱서비스_할일.한선 (.bak-디자인이식 백업 보존)
• /Users/ef/CrownyBrowser/src/앱서비스_북마크.한선 (.bak-디자인이식 백업 보존)
• 목업 원본(읽기전용): /Users/ef/Downloads/design_handoff_크라우니앱/할일-*.html, 북마크-*.html
• 이식노트(개선 아이디어·해석 근거): /Users/ef/.claude/design-port/크라우니앱벡터/이식노트.md
• 검증 스크립트(스크래치, python — 결정형 목업 파싱 전용이라 .한선 동반 미작성):

/private/tmp/claude-501/-Users-ef/b659685e-41e6-4536-9978-3202f8941a63/scratchpad/{parse_mockup.py,gen_table.py,diff_check.py}

크라우니코드

lookup HIT 0건 / MISS 2건(생성) / learn 추가 2건 (할일앱_디자인이식_벡터렌더, 북마크앱_디자인이식_벡터렌더)

잔여 이슈

• 할일 앱은 목업이 패널 고정 5행이라 6번째 이상 항목은 오버플로 안내 없이 비표시

(기존에도 데이터 6건 시드 — 이번 이식 범위 밖, 목업에 오버플로 상태가 없어 판단 보류).

• 텍스트 선택(드래그) 하이라이트 시각은 목업에 토큰이 없어 미이식(캐럿/타이핑은 정상).
• GUI 실행앱(.app) 재시작 후 육안 확인은 미실시(다른 앱 4종과 함께 일괄 설치 시 진행 권장).