app-mockups
최근 수정 시각: 2026-08-28 22:20:10
1. 개요
app-mockups는 앱 목업의 선반이다. 조사 → 기획서 → 디자인 방향성 → 승인 게이트 → 구현 → 테스트를 거친 목업이 마지막에 도착해 주소를 얻는 곳으로, 게임 목업 선반(game-mockups)의 앱판 자매 허브다.
목업의 볼륨 기준이 분명하다 — 코어 플로우 하나가 실제로 동작하고, 나머지 화면은 껍데기. 전부 만들면 그건 목업이 아니라 앱이고, 화면만 그리면 그건 목업이 아니라 시안이다. 이 선반에 오르는 것들은 그 사이에 있다.
구조는 최대한 단순하게 뒀다. 소스는 앱별 독립 프로젝트로 두고 빌드 결과만 배포 루트로 떨어뜨리며, 갤러리 대문은 프레임워크 없는 HTML 한 장에 카드 배열 하나가 전부다. 새 목업을 얹는 일이 카드 객체 한 줄 추가로 끝나야 선반이 계속 쓰인다.
2. 핵심 기능
- 갤러리 대문 — 카드 그리드로 목업을 늘어놓는다. 썸네일(없으면 이니셜 플레이스홀더), 카테고리 pill, 발행 월. 종이톤 팔레트.
- 빈 선반 상태 — 목업이 하나도 없으면 안내 문구로 대체된다.
- 자매 허브 링크 — 게임 목업 선반과 상호 연결.
- 헤드리스 검증 규약 — 렌더가 끝나면 페이지가 완료 플래그를 세운다. 스크린샷 눈검사를 자동화하기 위한 약속이다.
- 원커맨드 배포 — 배포 스크립트 한 줄. 공유 저장소라 커밋·푸시 먼저, 배포는 그다음이 규율이다.
2.1. 전시 중인 목업
| 목업 | 무엇인가 |
|---|---|
| SF6 Combo Book | 스트리트 파이터 6 콤보 레시피북. 넘패드 표기(236HP, xx, DRC 등)를 실시간 아이콘 스트립으로 바꿔 주는 자체 파서가 코어다. 콤보 목록·추가/편집·트레이닝 뷰가 실동작하고 통계·피드·설정은 껍데기. |
3. 기술 스택
| 영역 | 기술 |
|---|---|
| 허브 | 순수 HTML·CSS·JS 단일 페이지, 의존성 0 |
| 개별 목업 | Vite + React + TypeScript, 해시 라우터, localStorage (백엔드 없음) |
| 디버그 | 목업마다 GUI 디버그 패널 필수 — 라우트 직행·시드 주입·리셋·상태 덤프 |
| 호스팅 | Cloudflare Pages |
4. 개발 배경
목업은 만들고 나면 갈 곳이 없다. 로컬에서만 돌면 며칠 뒤엔 실행법을 잊고, 채팅에 붙인 스크린샷은 스크롤 위로 사라진다.
이 선반은 그 문제만 푼다. 목업에 주소를 주는 것. 주소가 있으면 폰에서 열어 보고, 남에게 보내고, 몇 달 뒤 다시 찾을 수 있다. 그거면 목업의 수명이 하루에서 영구로 바뀐다.
5. 링크
- 라이브: app-mockups.pages.dev
- GitHub: architectofthoughts/app-mockups (비공개)