저는 아케타 라시로입니다. 포트폴리오 사이트 "sirome.net"을 완전히 새롭게 리뉴얼했습니다!
귀여운 사이트를 만들었어요—모두들 칭찬해 주세요! 🎈
Wix에서 졸업하고, Claude Code로 만들었으며, GitHub와 Vercel을 통해 배포했습니다. 이번 하이라이트는 Notion과의 통합입니다.
Notion에 작업 기록을 작성하고 "게시" 버튼만 누르면 Notion 페이지가 사이트에 바로 반영되는 환경을 만들었어요! 만세! 🎉
휘잉!
왜 다시 만들었나
작년 말, 논문을 쓰는 동안 Notion이 정말 큰 도움이 되었어요! Notion이 얼마나 편리한지 깨닫고 작업 아카이브를 만들기 시작했습니다.
예전에는 Wix 사이트에 작업 기록을 올렸는데, Wix CMS(관리 화면)에서 글을 편집하는 게 좀 서툴렀거든요.
게다가 일상적인 작업 노트에 Notion을 사용하기 시작했는데, 어느새 Notion에 작업 데이터베이스가 만들어져 있었어요.
짜잔! 🎉
"이걸 그냥 바로 웹사이트로 만들 수 있으면 좋겠다...!"
만들 수 있습니다.
Notion은 정말 편리해서 기본적으로 글을 웹사이트로 게시하는 기능이 있어요.
간편하죠.
하지만 디자인을 바꿀 수는 없어요.
디자인 템플릿이 제한적이라 외형을 거의 바꿀 수 없습니다(2026년 5월 기준).
그렇다면 직접 만들어야겠죠.
그때 도우미로 나타난 것이 Claude Code입니다.
이게 Claude Code의 모습이에요.
너무 귀여워요.
Claude Code는 미친 수준이에요
Claude Code를 사용한 건 이번이 처음이었어요.
예전에 ChatGPT로 Melo-bot을 만들 때는
코드를 복사해서 붙여넣고, 오류를 확인하고, 다시 붙여넣고...
그 작업이 솔직히 꽤 지루했거든요.
Claude Code는 터미널에서 파일에 저장된 코드를 직접 수정해 줍니다.
- "좀 더 귀엽게 만들어 줘"
- "호버하면 부드럽게 확장되게 해 줘"
이런 느낌의 가벼운 코멘트를 주면 적절하게 코드를 수정하고 바로 구현해서 보여줘요. "진짜 미친 수준"이에요.
하지만 Claude Code를 너무 많이 작업시키면 "토큰 한도"에 도달해서 다시 사용하려면 반나절이나 하루를 기다려야 해서(Claude Pro 요금제 사용 중), 작은 질문이나 프로토타입은 일반 Claude나 ChatGPT에도 던져가며 진행했어요.
휘잉
Notion을 CMS로 만들었어요
새로운 sirome.net의 핵심은 Notion과의 완벽한 통합입니다 (💡).
이제 사이트 관리 화면조차 필요 없어요.
매일 Notion에 로그를 작성하세요.
↓
상태를 "게시됨"으로 변경하세요.
↓
사이트에 자동으로 반영됩니다.
게다가 게시 후에도 Notion에서 글을 수정하면 사이트 측에서 자동으로 업데이트됩니다.
이거 미친 거 아니에요?
공감해 주셨으면 좋겠어요.
진짜로.
물론, 글 페이지도 사이트 디자인에 맞게 설계했어요.
쭉 펴기
귀여워요.
기술적으로는 Notion API → Next.js → Vercel 구성이며, 상태 필드 변경을 트리거로 Incremental Static Regeneration (ISR)이 실행되는 방식인 것 같아요.
저도 잘 이해는 못 하지만요.
🎀 매력 포인트 🎀
작품 페이지
Works 페이지의 Featured 슬라이드 표시와 썸네일 사양은
구현하면서 사양을 결정했어요.
이런 거요 (글에서 자동으로 이미지를 가져오고, 커서를 수평으로 움직이면 크기가 변하는).
"이렇게 보이면 기분 좋겠다"는 걸 현장에서 테스트하면서 만들 수 있는 게 Claude Code 사용의 가장 큰 장점이에요.
디자이너로서 엔지니어와 작업했다면
"이렇게 많은 수정을 요청하면 분명 싫어할 거야"라고 생각하며 중간에 포기했을 거예요.
AI는 정말 여러모로 창의적인 직업에 혁명적인 도구입니다.
Melo-bot
헤더의 전자 게시판에서 Melo가 한 글자씩 말하는 Melo-bot.
이건 예전에 ChatGPT로 만든 프로그램의 일부를 재사용한 거예요.
잠들어 있던 Melo-bot을 sirome.net에 소환할 수 있어서 기뻤어요.
또한, 2019년경부터 Mr. Tsukunajiro와 Mr. Hor와 함께 비밀리에 만들어 오던 픽셀 아트 Shiro와 Melo의 세계가 부활했어요.
기쁘고, 존재해 줘서 고마워요.
Tsukunajiro의 픽셀 아트.
에헤헤.
귀여워요.
앞으로는 점차 게임 같은 요소를 더 추가할 계획입니다.
Notion 통합 때문에 로딩 시간이 때때로 길어질 수 있으니
시간 때우기 용도로 사용해 주세요.
1초마다 회전하는 파비콘
파비콘은 브라우저 탭에 표시되는 작은 아이콘이에요.
GIF 애니메이션을 등록할 수 없어서 10개의 PNG 이미지를 1초 간격으로 표시하고 있어요.
귀여워요.
스마트폰에서는 메뉴 버튼으로 배치했어요.
탭하면 뒤돌아봐요.
휴대폰에서도 한번 가지고 놀아보세요.
sirome.net
총 2주 만에 제작
자, 이렇게 Wix에서 졸업할 수 있어서 기쁩니다. 비싸거든요.
밤늦게나 이른 아침에 조금씩 만들었는데, 어느새 라이브가 되어 있었어요.
AI... 아직 회의적인 감정도 있지만, 세상이 완전히 바뀌었다는 것을 직접 체험했습니다.
아직 일러스트 생성에 AI를 사용하는 것은 법적 문제로 선뜻 손이 안 가지만
디자인과 창작 분야에서는 AI와 잘 지내면서 재미있는 것들을 만들고 싶어요.
작업 문의는 부담 없이 연락 주세요.
또한, 앞으로는 작업 크레딧과 아카이브 글에 힘을 쏟아
하나하나 정성스럽게 게시하려고 합니다.
현재 sirome.net에 있는 글들도 소급해서 업데이트할 예정입니다.
하나하나 제가 마음을 담아 그린 작업물입니다.
여러분 덕분에 지금까지 많은 그림을 그릴 수 있었고
이렇게 살아갈 수 있어서 감사합니다.
아직 진행 중인 작업이지만
앞으로도 Shiro, Melo, 그리고 아케타 라시로를 응원해 주세요!
사이트 확인해 보세요! 리플이나 DM으로 소감 기다리고 있어요 ✨
기술 스택 노트
- Claude / Claude Code
- Next.js
- Notion API
- GitHub
- Vercel
- Sharp
참고로, 이 글도 Notion에서 작성했습니다.
재미있게 보셨다면 공유해 주세요!
아케타 라시로
