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)

1. Vercel → Add New → Project → 2xteam/myjane Import
2. Framework: Next.js 자동 감지, Node.js Version 22.x
3. 환경 변수 없음 — 그대로 Deploy
4. 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 서버에 남은 앱이 없어지므로 서버를 정리할 수 있다.

관련 저장소

• snapword — snapword.myjane.co.kr
• snapnote — snapnote.myjane.co.kr