myjane
www.myjane.co.kr — SnapWord와 SnapNote로 이동하는 링크 사이트.
스택
Next.js 15 (App Router) · React 19 · TypeScript · Node.js 22
의존성은 Next/React뿐이며, 서버 로직이 없어 정적 페이지로 빌드된다.
Vercel에서 함수 호출이 발생하지 않으므로 사실상 무료로 운영된다.
개발
npm install
npm run dev # http://localhost:3000
포트를 3002로 둔 이유: SnapWord(3000)·SnapNote(3001)와 동시에 띄우기 위해서다.
디자인
색 체계는 결쩜사(kyulzzumsa.co.kr) 팔레트를 따른다.
분석 문서: my-obsidian-vault → 20-Design/결쩜사 디자인 시스템.md
| 배경 | 표면 | 강조 |
|---|
| 라이트(기본) | #fdfbff | #ffffff | #7c3aed |
| 다크 | #1e0938 | #2d1054 | #a78bfa |
핵심 규칙은 순수한 검정·회색을 쓰지 않는 것이다. 본문색이 #1a0f2e처럼
모든 중립색에 보라가 섞여 있다. 이것만 지켜도 같은 결로 보인다.
금색(#c9a84c)은 배지·구분선 같은 좁은 면적에만 쓴다.
값은 app/globals.css의 CSS 변수에 모아 두었고,
라이트/다크는 OS 설정(prefers-color-scheme)을 따른다.
아이콘 에셋
public/myjane-icon.png(512px)가 원본이고 나머지는 여기서 파생한다.
| 파일 | 용도 |
|---|
public/myjane-icon.png | 원본 512px, 페이지 히어로에 사용 |
public/icon-192.png | PWA·안드로이드 홈 화면 |
public/apple-touch-icon.png | iOS 홈 화면 (180px) |
public/favicon-32.png | 브라우저 탭 |
app/icon.png | Next.js 파일 규칙 파비콘 (256px) |
아이콘을 교체하면 512px 원본을 public/myjane-icon.png로 덮어쓴 뒤
아래 명령으로 나머지를 다시 만든다(sharp 필요).
node -e "const s=require('sharp');[[192,'public/icon-192.png'],[180,'public/apple-touch-icon.png'],[32,'public/favicon-32.png'],[256,'app/icon.png']].forEach(([n,p])=>s('public/myjane-icon.png').resize(n,n).png().toFile(p))"
아이콘 배경(네이비)이 페이지 배경과 거의 같아, 히어로의 타일은
.mark의 테두리·그림자로 경계를 만든다.
링크 대상을 바꾸거나 앱을 추가하려면 app/page.tsx의 APPS 배열만 수정하면 된다.
배포 (Vercel)
- Vercel → Add New → Project →
2xteam/myjane Import
- Framework: Next.js 자동 감지, Node.js Version 22.x
- 환경 변수 없음 — 그대로 Deploy
- Settings → Domains에 다음 두 개 추가
www.myjane.co.kr (Primary)myjane.co.kr → www.myjane.co.kr로 리다이렉트
DNS (가비아)
myjane.co.kr의 네임서버는 가비아다.
My가비아 → 서비스관리 → 도메인 → myjane.co.kr → DNS 정보 → DNS 관리
| 호스트 | 타입 | 값 | 비고 |
|---|
@ | A | Vercel이 안내하는 A 레코드 IP | 기존 165.22.247.25 삭제 |
www | CNAME | Vercel이 안내하는 CNAME 값 | 기존 A 레코드 삭제 |
- 값은 반드시 Vercel Domains 탭에 표시된 것을 쓴다.
- 가비아는 apex(
@)에 CNAME을 넣을 수 없어 apex는 A 레코드를 사용한다.
- 같은 호스트에 A와 CNAME은 공존할 수 없으므로 기존 A를 먼저 삭제한다.
snapword / snapnote 레코드는 건드리지 않는다. 이미 Vercel을 가리키고 있다.
이 전환이 끝나면 Cloudways 서버에 남은 앱이 없어지므로 서버를 정리할 수 있다.
관련 저장소
