260425 영어 표현 암기 서비스 Memento 멀티 유저 지원 및 Google 계정 연동

Claude Desktop, Code, 그리고 Opus 4.7 조합을 활용해 개인적으로 사용하던 영어 표현 암기 서비스 Memento를 여러 사람이 함께 사용할 수 있도록 확장했다. 이와 함께 구글 계정 기반 로그인 기능도 추가했다.

Claude Desktop에서 Code를 사용하는 경험은 상당히 만족스러웠다. 사이드 패널에서 계획을 확인하고 코드 변경점을 추적하면서, 필요 시 바로 터미널을 열어 작업을 이어갈 수 있어 흐름이 끊기지 않았다.

Opus 4.7 역시 다양한 조건을 반영해 계획을 세우고, 이를 바탕으로 결과물까지 한 번에 구현해냈다.

Claude in Chrome Extension과 연동해 E2E 테스트를 수행하도록 했더니, 브라우저를 직접 조작하며 테스트 시나리오를 실행하는 모습이 꽤 인상적이었다.

Pro 플랜에서 Opus 4.7만 사용하다 보니 5시간 토큰 한도가 중간에 소진되었고, 결국 다른 일을 하며 시간을 보내다가 다시 작업을 이어가야 했다.

앞으로도 틈틈이 완성도를 높여, 유료 서비스로 발전시켜보는 것을 목표로 하고 있다. 시스템에 의존하지 않고 혼자 힘으로 만 원이라도 벌어보는 경험은, 금액과 상관없이 충분히 의미 있다고 생각한다.

260419 Claude Design 사용해보기

Claude Design(https://claude.ai/design)을 사용해 개인 영어 표현 학습 서비스 Memento의 디자인 개선을 시도해봤다.

데모 영상 몇 분 본 상태에서 일단 부딪혀 봤다.

로컬에 있는 소스코드 폴더를 입력으로 넣고 다짜고짜 디자인을 개선해 달라고 했다.

작업이 끝난 후 메인 패널에서 변경된 디자인을 사용해보면서, 특정 UI 컴포넌트를 지정한 상태에서 디자인을 세부 조정하거나 클로드에 요청사항을 전달할 수 있다.

개선된 디자인은 정말 마음에 들었다. 당장 서비스에 적용하는 단계로 넘어갔다.

Export 메뉴에서 Claude Code 적용을 위한 압축 파일을 다운로드 받을 수 있다.

memento
├── project
│   ├── handoff
│   │   ├── App.css
│   │   ├── index.css
│   │   ├── Login.css
│   │   ├── Login.jsx
│   │   └── README.md
│   ├── Memento Redesign (Standalone).html
│   └── Memento Redesign.html
└── README.md

Prompt를 사용해서 적용하는 것도 가능하다.

Fetch this design file, read its readme, and implement the relevant aspects of the design. https://api.anthropic.com/v1/design/h/hx0HKDRsN03rtc4utkcYgQ?open_file=Memento+Redesign.html
Implement: Memento Redesign.html

그러나 아쉽게도 잘 되지 않았다. 변경된 디자인의 일부만 반영되었다. 아직 Research Preview 상태여서 그럴까? handoff 폴더의 파일들은 완전하진 않은 듯 하다.

완성도는 빠르게 좋아질 것이다.

일단 시도하고 부딪혀보는 사람이 기회를 얻는 세상이 왔다.

워드프레스 편집기 폰트 변경하기

워드프레스 편집기에서 한글 폰트가 너무 못생겨서 ChatGPT의 도움을 받아서 바꿨다.

Noto Sans KR 폰트로 바뀐 편집기 화면을 보니 글쓰는 맛이 한결 좋아졌다.

방법은 다음과 같다.

1. Theme 폴더로 이동

$ cd /var/www/wordpress/wp-content/themes/twentyfifteen

2. functions.php 파일에 코드 추가

add_theme_support('editor-styles');
add_editor_style('editor-style.css');

3. editor-style.css 파일 생성

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
body {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
}

260216 OpenCode

카카오톡에서 ChatGPT Pro 이용권 3개를 구입해 활성화하고, Claude Pro 구독을 해지했다.

연휴에 ChatGPT Pro의 구독으로 OpenCode를 써보기로 했다.

251011 영어 표현 암기 서비스 Memento 개발 (feat. Claude Code, Railway)

OpenCode를 이용해 개인 영어 표현 암기 서비스에 설명과 예문이 없는 경우 AI로 생성하여 채워넣는 기능을 추가했다. 코딩에 사용한 모델은 GPT-5.3 Codex, 애플리케이션에 사용한 모델은 GPT-4o mini.

요구사항을 입력하고, 코드를 생성하고, API Key를 생성하여 입력하고, 로컬에서 테스트하고, UI를 다듬고, Railway에 배포하기까지 30분도 걸리지 않았다.

무엇보다 TUI가 마음에 든다. 보기 좋고 조작성도 좋다. 당분간은 OpenCode를 열심히 써볼 생각이다.

251011 영어 표현 암기 서비스 Memento 개발 (feat. Claude Code, Railway)

에빙하우스의 망각곡선 이론을 기반으로, 1일-3일-1주일-2주일-1개월-3개월 주기로 영어 표현 복습을 도와주는 개인 서비스를 개발했다.

직접 작성하거나 수정한 코드는 한 줄도 되지 않는다. Claude Code와 Agentic Coding을 했다.

CLUADE.md를 작성하는 것으로 프로젝트를 시작했다.

  • 기능
  • 아키텍처
    • Frontend: React
    • Backend: Go + Fiber + Clean Architecture
    • Data: Notion Database
domain/
  entity/     - 엔티티
  gateway/    - 인터페이스
  error/      - 에러
usecase/      - 유즈케이스 (비즈니스 로직)
external/     - Notion 연동
api/          - REST API 인터페이스
public/       - 프론트엔드 정적 파일

Claude Code가 과거에 내가 작성한 코드를 학습해서 그런것인지, 패키지 구조를 명확히 제공해서 그런것인지는 모르겠지만, Claude Code가 작성해준 Go언어 코드는 나라도 이렇게 작성했겠다 싶을 정도로 만족스러웠다.

Frontend는 전적으로 Claude Code에게 맡겼다. 나에겐 Frontend를 다룰 역량이 없기 때문이다.

배포에는 Railway(https://railway.com/)를 이용했다. Github에 코드를 push하면 자동으로 빌드, 배포가 이루어진다. CPU, Memory, Network 사용량 및 Log를 모니터링할 수 있고, Custom domain도 연동할 수 있다.

현재는 30일 Trial Plan을 사용하고 있는데, Custom domain 연동만 포기하면 Free Plan으로 서비스를 운영할 수 있을 것 같다.

Railway는 개인 서비스를 운영하기에 상당히 괜찮은 환경인 것 같다. 가격이 합리적이고 사용성도 좋다.

AI 기술의 발전과 편리한 배포 환경 덕분에, 10월 9일부터 11일까지 3일 동안 하루에 1~2시간씩 자투리 시간을 투자해서 나에게 필요한 서비스를 뚝딱 만들 수 있었다.

사실 이 서비스는 육아휴직을 했던 2020년에 만들고 싶었던 것인데, 당시에 Frontend를 개발할 역량이 없어서 포기했다. 지금과 같은 수준의 AI가 그때도 있었다면 이런저런 재밌는 시도들을 해볼 수 있었을 것 같다.

요구사항이 명확하지 않아서 생긴 문제를 해결해 나가는 과정에서도 AI는 내가 의도하는 바를 찰떡같이 이해하고 코드를 수정해줬다. 이제는 더 이상 코드를 직접 작성할 필요가 없다는 생각을 가지게 되었다.

251010 EBS Easy Writing 벌써 1년

EBS Easy Writing을 공부하면서 익힌 영어 표현을 Notion에 입력만 하고 복습은 하지 않았다. 지금까지 약 2,400개의 영어 표현이 쌓여 있는데, 틈틈히 이 서비스를 활용해서 장기기억으로 옮겨 놓을 생각이다.