← 목록
기타 2026-06-28 4KB 읽기 4분

메모앱 인터랙티브 통합 사이클 — 한선씨 풀스택 실증

개요

한선씨 프론트엔드 풀스택의 세 조각(① 성능 렌더 ② cmd verb(둥근/그림자/이미지) ③ 이벤트루프)을 하나의 인터랙티브 사이클로 결선해 실증했다. 한 소스(화면.한선 DSL) → 두 출력(cmd→픽셀 / cmd→HTML) 구조에서, 상태A 렌더 → ADD 클릭 → 백엔드 쓰기 → 상태B 재렌더 → 새 항목 클릭 의 닫힌 루프가 작동한다.

무엇을 했는지

빠른 렌더 경로 결선

  • 기존 직접 GLYPH 경로(페이지렌더러가 36 CIF 글리프 순차 처리)는 ~2분 → 회피.
  • 프로덕션 경로 채택: 화면.한선(cmd IR)페이지배선.py(TEXT→글리프 RECT, Python 선처리 + RLE)
페이지렌더러(RECT 드로우콜) → PPM → PNG.
  • 배선 기본 캔버스 720×180 클리핑 문제 발견CW=800 CH=600 환경변수로 메모앱 캔버스 정합.
  • 결과: 상태A 0.74s, 상태B 0.85s (둘 다 수초 내, 타임아웃 없음). 전체 사이클 1.78s.

그림자 cmd 모드 추가 (화면.한선)

  • 버튼() cmd 분기에 _프림_그림자(x,y,w,h,12,80) 선행 → ADD 버튼 드롭섀도.
  • 목록항목()그림자(x,y,w,행높이-8,10,55) 선행 → 카드별 드롭섀도.
  • 렌더러 SHADOW verb = RGB알파사각형(opcode 789, 오프셋 blur/2, 검정 알파). 알파 0–255.
  • 둥근(ROUND verb, 3-rect 근사)은 이미 버튼/카드에 적용됨 → cmd 모드에서 둥근+그림자 동시 표시.

통합 드라이버 (통합사이클.sh)

초기렌더(A) → ADD 히트테스트 → 메모추가 → 재렌더(B) → 새 항목 클릭 → A≠B 검증을 한 스크립트로.

실증 결과 (EXIT=0, 전 체크 통과)

단계결과
상태A cmd IR23줄, MEMO=4, ROUND=5, SHADOW=5, 목록히트=4
상태A 렌더0.74s, RECT 5516행, PNG 19KB
ADD(670,177) 클릭이벤트루프 → 액션 "메모추가"
백엔드 메모추가count 4→5, "크라우니벡터" 저장 확인
상태B cmd IR26줄, MEMO=5, ROUND=6, SHADOW=6, 목록히트=5
상태B 렌더0.85s, RECT 6624행, PNG 20KB
새 항목(400,506) 클릭이벤트루프 → "메모열기:4" (이름=메모열기, 인자=4)
A≠B PNG 픽셀상이 (A 19149B / B 20902B)
상태A: MEMO 4 + 카드 4 + 드롭섀도. 상태B: MEMO 5 + 새 카드 "크라우니벡터" + 드롭섀도. 새 메모는 CIF 가용 글자(크라우니+벡터)로 골라 픽셀 렌더 보장.

관련 파일

  • /Users/ef/CrownyBrowser/src/통합사이클.sh — 통합 실증 드라이버 (신규)
  • /Users/ef/CrownyBrowser/src/화면.한선 — 버튼/목록항목에 그림자 cmd verb 추가
  • /Users/ef/CrownyBrowser/src/메모앱.한선 — 프론트(라이브 데이터 바인딩)
  • /Users/ef/CrownyBrowser/src/메모백엔드.한선 / 메모추가.한선 — 백엔드 쓰기
  • /Users/ef/CrownyBrowser/src/이벤트루프.한선 — 히트맵 역순스캔 클릭 디스패처
  • /Users/ef/CrownyBrowser/src/페이지렌더러.한선 — v4 RECT/ROUND/SHADOW/IMG/GLYPH
  • /Users/ef/CrownyBrowser/native/m3-배선/페이지배선.py — cmd IR → 통합 플랜
  • 산출 PNG: /tmp/메모_A.png, /tmp/메모_B.png

잔여 이슈

  • 직접 GLYPH 경로(한선씨 줄꺼내 O(n²))는 35글리프 2.80s — 단일 화면은 허용, 대형 페이지엔 부적합.
compact PSV 누적은 VM STR_MAX/OOM 한계로 불가. 프로덕션은 Python배선 경로 고정.
  • 플랜이 65KB 초과 시 청크 분할(3개) — 렌더러가 청크 누적 처리(PPM 일관). 정상 동작 확인.
  • 입력칸 텍스트 실제 편집(키보드 입력)은 미결선 — 현재 힌트 텍스트 고정. 클릭 히트영역만 등록.
  • IMG/둥근 귀퉁이는 근사(3-rect, 안티에일리어싱 없음). 정밀 라운드는 향후 알파 마스크 필요.