블로그하는프로그래머

기법 · 2026-09-30

조위차는 그날 만조와 간조의 높이 차이입니다. 이 값이 클수록 조류가 셉니다.

물때를 '몇 물'로 부르는 방식은 음력에서 왔습니다. 하지만 조석예보가 실제로 알려 주는 값은 만조·간조의 시각과 조위입니다. 물때 이름은 달력으로 정해지고, 조위차는 그날의 예보 값입니다. 그래서 이 사이트는 조위차를 먼저 보여 주고 물때 이름은 물때표에 음력 날짜와 함께 작게 적습니다. 서해는 7물때식, 남해는 8물때식으로 국립해양조사원의 표를 따랐고, 조차가 작은 동해에는 물때 이름을 붙이지 않았습니다.

조류가 거의 없으면 먹이가 흐르지 않아서 입질이 뜸해지는 편입니다. 반대로 조류가 너무 세면 채비가 제자리에 서지 못하고 밑걸림이 늘어납니다. 그 사이 어딘가가 좋다고들 하지만, 알맞은 구간은 포인트의 지형과 수심에 따라 달라집니다.

같은 날이어도 지역마다 조위차가 크게 다릅니다. 서해는 수 미터에 이르는데 동해는 수십 센티미터에 그칩니다. 그래서 동해에서는 조위차보다 파고와 바람이 조건을 더 크게 좌우합니다.

포인트 화면의 물때표에는 앞으로 일주일 치가 함께 나옵니다. 어느 날 나갈지 고를 때 쓰면 됩니다.

원문: https://fish.famousbros.com/guide/reading-tide-range/

입문 · 2026-09-28

첫 바다 출조라면 낚싯대보다 먼저 챙길 것이 있습니다.

첫째는 구명조끼입니다. 갯바위와 방파제에서는 부력재가 들어 있는 조끼를 고르고 허리 벨트까지 채웁니다. 팽창식은 부피가 작아 편하지만 관리 상태를 확인해야 합니다. 선상 낚시에서 배에 비치된 조끼를 쓰더라도 몸에 맞는지 먼저 봅니다.

다음은 신발입니다. 젖은 갯바위는 아주 미끄러워서 일반 운동화로 올라서면 위험합니다. 바닥에 펠트나 스파이크가 붙은 갯바위화를 신습니다. 방파제 테트라포드는 틈이 넓고 깊으니 발을 디딜 수 있는 자리만 밟습니다.

세 번째는 기상 확인입니다. 기상특보가 있는 날은 나가지 않습니다. 이 사이트의 점수가 높게 나와도 마찬가지입니다. 점수는 관측값을 요약한 숫자일 뿐 안전을 판단해 주지 않습니다. 출항 통제와 낚시어선 운항 여부는 기상청, 해양경찰청, 관할 지자체 발표를 따릅니다.

선상낚시 (외줄·카드채비·타이라바) 자세히 보기

마지막으로 혼자 가지 않는 편이 좋습니다. 밤낚시와 갯바위라면 더욱 그렇습니다. 어디로 가는지, 몇 시에 돌아올지 누군가에게 알려 두십시오.

장비는 그다음 문제입니다. 처음에는 장비를 빌리거나, 가까운 방파제에서 간단한 채비로 시작해도 충분합니다.

원문: https://fish.famousbros.com/guide/first-sea-trip/

원문: https://stock.famousbros.com/market/learn/inflation/

원문: https://stock.famousbros.com/market/learn/compound/

원문: https://stock.famousbros.com/market/learn/trend-line/

Claude Code에 Mods(모드)라는 기능이 들어왔습니다. Claude Code의 화면과 동작을 내 코드로 바꾸는 플러그인입니다. 이 글은 공식 문서를 읽은 뒤 제 PC(Windows 11, Claude Code v2.1.296)에서 mod 두 개를 직접 만들어 돌려 본 결과입니다. 아래 스크린샷은 모두 실제 화면입니다.

1. Mods는 어떻게 동작하나

mod는 자바스크립트(또는 타입스크립트) 함수 묶음입니다. Claude Code가 일하는 중에 이벤트가 생기면(도구를 쓰려 할 때, 프롬프트를 보낼 때, 화면의 한 부분을 그릴 때 등) mod의 함수를 부릅니다. 함수는 그 이벤트를 지켜보기만 하거나(observe), 바꾸거나(rewrite), 직접 처리(answer)할 수 있습니다.

기존 기능과 나란히 놓으면 차이가 보입니다.

• Mod: Claude Code 안에서 도는 JS/TS 함수. 화면에 패널, 띠, 버튼을 그릴 수 있음
• 설정 훅(settings hook): 정해진 시점에 셸 스크립트를 실행. 화면은 못 그림
• 스킬(Skill): Claude가 읽는 지시문(SKILL.md). 화면은 못 그림
• MCP 서버: Claude에게 외부 도구를 붙여 줌. 화면은 못 그림

그러니까 Claude Code 자체를 고쳐 쓰고 싶을 때 쓰는 것이 mod입니다. Claude Code의 /diff 화면도 이제 내장 mod(cc-plugin-diff)로 돌아갑니다.

2. 출시일

• 2026년 10월 1일, Claude Code v2.1.287에 정식으로 추가됐습니다(npm 배포 시각 2026-10-01 16:59 UTC, 한국 시간으로는 10월 2일 새벽).
• 공식 변경 기록 문구: “Added Claude Mods: plugins may now modify deeper behavior”
• 데스크톱 앱의 Code 탭은 내장 Claude Code v2.1.286부터 지원합니다.
• 같은 버전에 내장 mod인 You should know(옆에서 다른 에이전트가 놓친 점을 알려 주는 기능)도 함께 들어왔습니다.

버전은 터미널에서 claude --version으로 확인합니다. 2.1.287보다 낮으면 업데이트하세요.

3. 사용 방법

방법 A. Claude에게 만들어 달라고 하기 (가장 쉬움)

1. Claude Code 대화창에 원하는 것을 말합니다. 예: 입력창 위에 현재 git 브랜치를 보여 주는 mod 만들어 줘
2. Claude가 내장 스킬 plugin-authoring으로 ~/.claude/dev-mods/<세션ID>/<mod이름>/ 에 파일을 씁니다(파일마다 승인 요청이 뜹니다).
3. 첫 파일을 저장할 때 핫 리로드를 켤지 묻습니다. Enable for this session을 고릅니다.
4. Claude의 답이 끝나면 mod가 바로 켜집니다. 고칠 점을 말하면 다음 답이 끝날 때 다시 로드됩니다.

이렇게 만든 mod는 그 세션에서만 켜지고, 일정 기간(cleanupPeriodDays)이 지나면 폴더가 지워집니다. 계속 쓰려면 폴더를 다른 곳에 복사해 두세요.

방법 B. 직접 만들기 (파일 3개)

my-mod/
├── .claude-plugin/
│   └── plugin.json   ← 이름·버전
└── hooks/
    ├── hooks.json    ← {"modules": ["./register.js"]}
    └── register.js   ← 실제 코드

Node.js 설치도, 빌드도 필요 없습니다. Claude Code가 .js/.ts 파일을 그대로 읽습니다. 실행 명령은 아래와 같습니다.

claude --plugin-dir ./my-mod

방법 C. 마켓플레이스에서 설치

/plugin install 플러그인이름@마켓플레이스이름

Anthropic이 공개한 샘플 mod 3개(token-weather 컨텍스트 예보, blast-radius 위험 명령 미리보기, replay-theater 지난 수정 되감기)는 claude-code-playground 저장소에 있습니다.

4. 예시 ①: 도구 호출 횟수를 스피너에 표시하고 /tally 명령 추가

공식 튜토리얼을 한국어로 바꿔 만든 mod입니다. Claude가 파일 읽기, 명령 실행 같은 도구를 쓸 때마다 횟수를 세서 작업 중 표시줄에 붙입니다.

let calls = 0

export function register(on) {
  // 세션 시작 때 /tally 명령 추가
  on('session.start', async ($, e, next) => {
    await $.command.register({ name: 'tally', description: 'Claude가 도구를 몇 번 썼는지 보여 줍니다' })
    return next(e)
  })
  // 도구를 쓸 때마다 +1
  on('tool.call', async ($, e, next) => {
    calls += 1
    $.ui.invalidate('ui.render')
    return next(e)
  })
  // /tally 입력 시 출력
  on('command.run', { command: 'tally' }, async () => {
    return { text: '이 mod가 켜진 뒤 Claude가 도구를 ' + calls + '번 썼습니다' }
  })
  // 스피너 옆에 숫자 붙이기
  on('ui.render', { component: 'Spinner' }, async ($, e, next) => {
    return next({ ...e, props: { ...e.props, suffix: ' · 도구 호출 ' + calls + '회…' } })
  })
}

파일 3개를 읽어 달라고 시키자 작업 중 표시줄에 “도구 호출 3회…”가 붙었습니다.

작업이 끝난 뒤 /tally를 입력하면 Claude를 거치지 않고 mod가 바로 답합니다.

5. 예시 ②: 위험한 명령 차단과 입력창 위 상태 띠

rm -rf, git reset --hard, git push --force처럼 되돌릴 수 없는 명령을 Claude가 실행하려 하면, 실행하지 않고 이유를 돌려주는 mod입니다. 입력창 바로 위 띠(AbovePrompt)에는 지금까지 막은 건수를 띄웁니다.

const RISKY = /\brm\s+-rf?\b|\bRemove-Item\b.*-Recurse|\bgit\s+reset\s+--hard\b|\bgit\s+push\b.*--force/i
let blocked = 0

export function register(on) {
  on('tool.call', { tool: ['Bash', 'PowerShell'] }, async ($, e, next) => {
    if (!RISKY.test(e.command)) return next(e)   // 나머지는 그대로 통과
    blocked += 1
    $.ui.invalidate('ui.render')
    return { deny: 'safe-guard mod가 막았습니다: 되돌릴 수 없는 명령입니다. 사용자에게 먼저 확인을 받으세요.' }
  })
  on('ui.render', { component: 'AbovePrompt' }, async ($, e) => {
    const { Text } = $.ui.resolve(e)
    return Text({ children: ['safe-guard 켜짐 · 막은 위험 명령 ' + blocked + '건'] })
  })
}

일부러 “git reset --hard HEAD 실행해 줘”라고 시켜 봤습니다. 명령은 실행되지 않았고, Claude는 mod가 돌려준 이유를 읽은 뒤 먼저 확인을 받겠다고 답했습니다. 띠의 숫자도 0건에서 1건으로 바뀌었습니다. 맨 위에 보이는 “safe-guard: reloaded” 줄은 세션을 켠 채로 코드를 고쳤을 때 자동으로 다시 로드됐다는 표시입니다.

세션을 처음 켰을 때 띠는 이렇게 보입니다.

6. 활용 방법 5가지

1. 설치 전 검사: claude plugin validate ./mod폴더를 돌리면 코드를 실행하지 않고도 어떤 이벤트를 듣는지(hooks), 무엇을 호출하는지(calls) 보여 줍니다. 남이 만든 mod는 꼭 먼저 돌려 보세요. $.http.fetch(외부 전송), $.env.get(API 키 읽기), $.process.run(프로그램 실행)이 보이면 왜 필요한지 확인해야 합니다.
2. 팀 안전장치: 예시 ②처럼 강제 푸시, 운영 DB 명령, 특정 폴더 삭제를 mod로 막습니다. 거절 문구를 “새 브랜치로 푸시하세요”처럼 Claude가 따라 할 수 있는 지시로 쓰면 Claude가 알아서 다른 길로 갑니다.
3. 상태 표시: 입력창 위 띠에 현재 브랜치, 배포 환경(운영/개발), 컨텍스트 사용량 같은 정보를 띄웁니다. 엉뚱한 브랜치에서 작업하는 실수가 줄어듭니다.
4. 즉시 실행 명령: /tally처럼 Claude 응답을 기다리지 않고 바로 도는 명령을 만듭니다. Claude가 일하는 중에도 실행되니 자주 보는 로그 요약이나 테스트 결과 보기에 맞습니다.
5. 자동 테스트: claude plugin test로 로그인이나 네트워크 없이 mod를 테스트할 수 있습니다. 사내에 배포할 mod라면 테스트도 같이 넣어 두세요.

지금 세션에 켜져 있는 mod는 /plugin 화면 위쪽 줄에서 확인합니다.

7. 꼭 알아야 할 주의점

• mod는 샌드박스 밖에서 내 권한으로 돕니다. 파일 읽기·쓰기, 프로그램 실행, 네트워크 요청, 설정 파일의 API 키 읽기가 모두 됩니다. 믿을 수 있는 곳에서 받은 mod만 설치하세요.
• mod는 권한 확인 창(permission prompt)을 바꿀 수 없습니다. 그 창은 늘 사실 그대로 나옵니다.
• VS Code 확장의 채팅 패널, claude -p, 클라우드 세션에서는 코드는 돌지만 그림은 보이지 않습니다. 데스크톱 앱의 WSL 세션은 아예 지원하지 않습니다.
• 끄는 방법은 범위마다 다릅니다. 하나만 끄려면 /plugin Installed 탭, 한 세션 전체는 claude --safe-mode, 영구적으로는 settings.json에 "disableAllHooks": true를 넣습니다.
• 이벤트와 API 이름은 버전마다 바뀔 수 있습니다. mod 폴더의 .claude-plugin/types/에 내 버전 기준 타입 파일이 생기니 그 파일을 기준으로 삼으세요.

8. 써 보고 남은 것

지금까지는 CLAUDE.md, 스킬, 훅으로 Claude의 행동을 조정했습니다. Mods부터는 Claude Code라는 도구 자체를 입맛대로 고칠 수 있습니다. 직접 해 보니 진입 장벽은 생각보다 낮았습니다. 파일 3개에 코드 20줄이면 되고, 그것도 “이런 mod 만들어 줘”라고 말하면 Claude가 써 줍니다.

대신 할 수 있는 일이 많은 만큼 위험도 같이 커집니다. 남이 만든 mod는 validate로 먼저 확인하는 습관을 들이면, 팀의 실수를 막는 안전장치부터 나만의 대시보드까지 폭넓게 쓸 수 있습니다.

참고: Mods 공식 문서 · Mod 만들기 튜토리얼

Claude에게 화면을 만들어 달라고 하면 그럴듯한데 어딘가 뻔한 결과가 나올 때가 많습니다. 참고할 실제 화면 없이 머릿속의 ‘평균적인 화면’을 떠올려 만들기 때문입니다. Mobbin MCP를 붙이면 Claude가 화면을 만들기 전에 실제로 출시된 앱과 웹사이트의 화면, 흐름을 먼저 찾아보고 그걸 근거로 설계합니다.

※ 이 글은 Mobbin 공식 페이지, 공식 문서, 공식 GitHub 저장소를 보고 정리했습니다. 유료 계정이 있어야 해서 제가 직접 연결해 보지는 않았고, 문서에서 확인되지 않는 부분은 '모름'으로 적었습니다.

Mobbin MCP는 무엇이고 누구에게 맞나

Mobbin은 실제로 출시된 모바일 앱과 웹 서비스의 화면을 모아 둔 디자인 레퍼런스 라이브러리입니다. Mobbin MCP는 이 라이브러리를 AI 도구와 코딩 에이전트에 연결하는 공식 MCP 서버입니다. "은행 앱 온보딩 화면"처럼 자연어로 물으면 실제 서비스의 화면, 흐름, 웹 섹션을 찾아 돌려줍니다.

• 규모: 공식 GitHub 저장소의 사용 규칙 파일에는 실제 앱 화면 621,500장 이상을 색인한다고 적혀 있고, 지금 공식 MCP 페이지에는 '600,000+'로 나옵니다. 앱 수나 흐름 수 같은 세부 수치는 모릅니다.
• 대상: 디자이너, 프론트엔드 개발자, 1인 개발자, 기획자처럼 ‘실제 서비스는 이걸 어떻게 풀었나’를 자주 확인해야 하는 사람에게 맞습니다.
• Claude와 같이 쓰는 이유: 레퍼런스를 찾아 캡처해 붙여 넣던 일을 Claude가 직접 하고, 비교와 정리, 화면 코드 작성까지 대화 하나에서 끝납니다.

출시·업데이트 정보

• 출시: 2026-05-11 출시 발표 기준입니다. 발표 당시 화면 수는 621,500장 이상이었습니다.
• Claude 공식 커넥터 등록: 공식 문서에 따르면 Mobbin은 지금 Claude 커넥터 디렉터리에 인증된(verified) 커넥터로 올라 있습니다. 등록 날짜는 모릅니다.
• AI 크레딧 베타: 2026-10-12에 시작했습니다. 크레딧은 Deep Search에만 쓰이고, 베타는 약 6개월 진행할 예정입니다(종료일 미정).
• 공식 MCP 페이지의 마지막 갱신일은 2026-09-11입니다. 그 밖의 변경 이력은 모릅니다.

MCP 도구 3가지

Mobbin MCP는 도구가 3개뿐인 작은 서버입니다. 셋 다 읽기 전용이라 검색만 하고, Mobbin 계정의 컬렉션 같은 내용은 건드리지 않습니다.

입력값

세 도구 모두 자연어 검색어를 넣습니다. 공식 페이지는 플랫폼(모바일·웹), 업종, 목적, 패턴 이름을 구체적으로 적을수록 결과가 좋아진다고 안내합니다. search_screens에는 mode 값이 있어서 "standard"(일반 검색)와 "deep"(Deep Search) 중 하나를 고릅니다. Deep Search는 LLM으로 검색어의 의도를 해석하고, 결과의 관련성을 한 번 더 걸러 가장 맞는 것만 돌려줍니다. 다른 매개변수의 이름, 기본값, 결과 개수 한도는 공식 문서에 없어서 모릅니다. 실제 스키마는 연결한 뒤 클라이언트의 도구 목록에서 확인하는 것이 정확합니다.

돌아오는 결과

• 화면 이미지, 앱(제품) 이름, 흐름이나 섹션의 맥락, Mobbin 페이지 링크
• 이미지는 두 종류입니다. 에이전트가 읽는 저해상도 미리보기와 저장·내보내기용 고해상도 image_url입니다. 화면을 저장해 달라고 하면 이 주소에서 내려받습니다. 이미지 주소는 30일이 지나면 만료됩니다.
• 인터랙티브 갤러리: MCP Apps 규격을 지원하는 클라이언트에서는 검색 결과가 대화 안에 갤러리로 펼쳐집니다. 공식 문서가 드는 예는 ChatGPT, Claude 데스크톱·웹, Codex 앱입니다. Claude Code(터미널)에서 갤러리가 어떻게 보이는지는 모릅니다.

요금·조건

• MCP를 쓸 수 있는 플랜: Pro · Team · Enterprise. 무료 플랜에서는 MCP와 REST API를 쓸 수 없습니다.
• Pro(1인): 연간 결제 시 월 $10(1년 $120), 분기 결제 시 월 $15(3개월 $45).
• Team: 연간 결제 시 1인당 월 $16, 분기 결제 시 1인당 월 $24.
• Enterprise: 별도 견적.
• 요금 페이지는 접속한 지역의 통화로 보입니다. 한국에서 열었을 때는 Pro 월 ₩14,000, Team 1인당 월 ₩22,400(둘 다 연간 결제 기준)으로 나왔습니다.
• 학생과 교육자는 Pro를 50% 할인(최대 2년)받을 수 있습니다.

• AI 크레딧: 성공한 Deep Search 1회에 5크레딧이 듭니다. 일반 검색과 search_flows, search_sections는 0크레딧입니다. 매달 Pro는 300크레딧(Deep Search 60회), Team·Enterprise는 1인당 600크레딧(120회)을 받습니다. 결과가 없거나 Mobbin 쪽 오류로 실패한 검색은 차감하지 않습니다. 웹사이트와 MCP가 같은 한도를 나눠 씁니다.
• 속도 제한: 사용자당 60초에 60회입니다. 넘으면 HTTP 429와 함께 기다릴 초를 알려 주는 Retry-After가 옵니다.
• Claude 쪽 조건: Claude의 어느 요금제부터 이 커넥터를 쓸 수 있는지는 Mobbin 문서에 없어서 모릅니다. Team·Enterprise 워크스페이스에서는 관리자가 먼저 허용해야 할 수도 있습니다.

연결 방법

API 키를 복사할 필요는 없습니다. 처음 연결할 때 브라우저가 열리고, Mobbin 계정으로 로그인해 허용(OAuth)하면 됩니다. MCP 주소는 https://api.mobbin.com/mcp(Streamable HTTP)입니다.

1) claude.ai · Claude 데스크톱 (권장)

1. Claude에서 Customize → Connectors → Add → Browse connectors로 들어가 Mobbin을 고릅니다. 공식 문서의 'Mobbin connector page on Claude' 링크로 바로 가도 됩니다.
2. Connect를 누릅니다.
3. 열린 브라우저 창에서 Mobbin 계정으로 로그인하고 접근을 허용합니다.

공식 커넥터 디렉터리에 올라 있으니 주소를 직접 넣는 커스텀 커넥터 방식은 쓸 필요가 없습니다. Team·Enterprise 워크스페이스라면 관리자가 Organization settings → Connectors → Add → All available에서 Mobbin을 고르고 'Add to your team'을 눌러야 일반 구성원도 연결할 수 있습니다.

2) Claude Code

공식 문서는 위의 데스크톱·웹 연결을 먼저 하라고 권합니다. Claude Code는 claude.ai 계정의 커넥터를 같이 쓰기 때문에, 같은 계정으로 로그인한 Claude Code에서는 따로 설정하지 않아도 Mobbin 도구가 보입니다. Claude Code만 쓰는 경우의 방법도 문서에 있지만 '권장하지 않음'으로 표시돼 있습니다.

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

1. 터미널에서 위 명령으로 Mobbin 서버를 등록합니다. --scope user를 붙였으니 모든 프로젝트에서 쓸 수 있습니다.
2. 새 Claude Code 세션을 열고 /mcp를 입력한 뒤 목록에서 mobbin을 고릅니다.
3. Authenticate를 고르면 브라우저가 열립니다. Mobbin 계정으로 로그인해 허용합니다.

연결이 됐는지는 공식 문서의 예시 프롬프트 "Search Mobbin for onboarding screens from banking apps"(은행 앱 온보딩 화면 찾아 줘)로 확인할 수 있습니다.

활용 예시 3가지

아래 예시의 동작은 공식 문서의 도구 설명을 기준으로 정리했습니다. 실제로 어떤 앱이 결과로 나올지는 직접 써 보지 않아 적지 않았습니다.

예시 1. 가계부 앱 온보딩 화면 설계

상황: 새 가계부 앱을 만드는데, 첫 실행 온보딩을 몇 단계로 어떤 순서로 보여 줄지 정하지 못한 경우입니다.

Mobbin에서 핀테크·가계부 모바일 앱의 온보딩 흐름을 5개 이상 찾아 줘.
각 흐름의 단계 수, 권한 요청 위치, 계좌 연결을 언제 요구하는지 표로 비교하고,
공통점을 바탕으로 우리 앱 온보딩 4단계 와이어프레임을 제안해 줘.
참고한 앱 이름과 Mobbin 링크는 꼭 남겨 줘.

1. 순서가 중요한 문제라서 Claude는 search_flows로 온보딩 흐름을 찾습니다.
2. 흐름마다 화면 미리보기, 앱 이름, Mobbin 링크를 받아 단계별로 읽습니다.
3. 비교표와 공통 패턴, 제안 와이어프레임을 정리합니다.

비교표는 팀 회의 자료로, 링크는 디자이너가 원본을 확인할 때 씁니다. 와이어프레임은 출발점이니 우리 서비스의 실제 가입 절차에 맞게 고쳐야 합니다.

예시 2. 구독 앱 결제 유도(paywall) 화면 다시 만들기

상황: 지금 쓰는 결제 유도 화면의 문구와 배치가 어색해서 새로 만들려는 경우입니다.

Mobbin에서 모바일 구독 앱의 paywall 화면을 deep 모드로 찾아 줘.
월간/연간 요금 비교, 무료 체험 안내, 닫기 버튼 위치를 중심으로 6개를 비교하고,
그 패턴을 참고해서 우리 앱 paywall을 React Native 코드로 만들어 줘.
색과 문구는 우리 것으로 새로 쓰고, 다른 앱 문구는 그대로 옮기지 마.

1. 개별 화면이니 search_screens를 씁니다. 'deep 모드'를 지정했으므로 mode: "deep"으로 호출할 가능성이 높습니다(성공 1회당 5크레딧).
2. 미리보기 이미지로 요소 배치를 비교합니다.
3. 정리한 패턴으로 새 화면 코드를 씁니다.

나온 코드는 시안으로 보고, 접근성(대비, 글자 크기, 닫기 버튼 크기)은 따로 점검합니다. 공식 페이지에도 접근성은 별도로 평가하라고 적혀 있습니다.

예시 3. SaaS 랜딩 페이지 가격표 섹션 개편

상황: B2B SaaS 랜딩의 가격표 섹션 전환율이 낮아 구성을 바꾸려는 경우입니다.

Mobbin에서 B2B SaaS 웹사이트의 pricing 섹션과 고객 후기 섹션을 각각 찾아 줘.
플랜 개수, 추천 플랜 강조 방식, 연간 할인 표기, FAQ 위치를 정리하고
우리 랜딩의 가격표 섹션을 HTML·CSS로 다시 만들어 줘.

1. 웹사이트 섹션이므로 search_sections를 가격표용과 후기용으로 나눠 부릅니다.
2. 섹션 이미지, 사이트 이름, 링크를 받아 구성 요소를 정리합니다.
3. 그 기준으로 새 섹션 코드를 씁니다.

바로 배포하기보다는 A/B 비교 후보로 씁니다. 다른 회사가 쓰는 구성이라고 해서 더 잘 팔린다는 증거는 아니라고 공식 페이지에도 적혀 있습니다.

쓸 때 기억할 5가지

1. 도구를 이름으로 가리킵니다. 흐름, 화면, 섹션 중 무엇이 필요한지 말하면 Claude가 맞는 도구를 고르기 쉽습니다.
2. 검색어는 구체적으로 씁니다. 플랫폼, 업종, 목적, 패턴 이름을 넣으세요. 결과가 너무 적으면 조건을 빼거나 화면·흐름·섹션을 따로 검색하라고 공식 페이지가 안내합니다.
3. Deep Search는 아껴 씁니다. Pro는 한 달에 60회분입니다. 조건이 까다로운 검색에만 deep을 쓰고 나머지는 일반 검색으로 충분합니다.
4. 링크와 앱 이름을 남기게 합니다. 근거를 다시 확인할 수 있고, 이미지 주소가 30일 뒤 만료돼도 Mobbin 링크로 찾아갈 수 있습니다.
5. 여러 개를 보게 합니다. 하나만 보고 따라 하면 그 앱만의 사정까지 베끼게 됩니다. 최신성이 중요하다면 수집 시점 정보도 확인하게 하세요.

비슷한 도구와 비교

주의할 점

• 참고용입니다. 결과는 다른 회사의 디자인입니다. 공식 페이지도 보호되는 디자인, 브랜드, 문구, 에셋을 그대로 복사하지 말라고 적고 있습니다.
• 읽기 전용입니다. Mobbin 컬렉션에 저장하거나 정리하는 작업은 MCP로 할 수 없습니다.
• 속도 제한은 60초에 60회입니다. 429가 나오면 Retry-After만큼 기다렸다가 다시 시도하고, 계속 실패하면 대기 시간을 점점 늘리라고 공식 문서가 권합니다.
• 이미지 주소는 30일 뒤 만료됩니다. 문서에 붙여 둔 이미지 링크는 나중에 깨질 수 있습니다.
• 더 쓰지 않을 클라이언트는 Mobbin 계정 설정에서 연결을 해제해 권한을 회수할 수 있습니다.

자주 묻는 질문

무료 계정으로도 쓸 수 있나요?

쓸 수 없습니다. MCP는 Pro · Team · Enterprise 플랜에만 들어 있습니다.

Claude Code에서도 따로 설정해야 하나요?

claude.ai나 데스크톱에서 먼저 연결했다면, 같은 계정으로 로그인한 Claude Code에서 자동으로 쓸 수 있다고 공식 문서가 안내합니다. Claude Code만 쓴다면 위의 claude mcp add 명령과 /mcp 인증 순서를 따르면 됩니다.

크레딧을 다 쓰면 어떻게 되나요?

2026-10-12에 시작한 베타 기간에는 막히지 않고 추가 요금도 없습니다. 베타가 끝난 뒤에는 한도를 다 쓰면 다음 초기화 때까지 Deep Search만 멈추고, 일반 검색과 나머지 기능은 계속 쓸 수 있습니다. 추가 크레딧을 어떻게 살 수 있을지는 아직 정해지지 않았습니다(모름).

Mobbin MCP를 붙일 만한 경우

도구가 3개라 익힐 것이 적고, 공식 커넥터라서 연결도 클릭 몇 번이면 됩니다. 유료 플랜이 필요하다는 점이 걸리지만, 이미 Mobbin Pro를 쓰고 있다면 추가 요금 없이 바로 붙일 수 있습니다.

공식 안내: https://mobbin.com/mcp · 공식 문서: https://docs.mobbin.com/mcp/introduction

Nicelydone MCP는 실제로 출시된 SaaS·웹앱의 화면, 사용자 흐름, UI 부품을 Claude가 직접 검색해 참고할 수 있게 해 주는 원격 MCP 서버입니다. 대시보드나 설정 화면을 만들기 전에 Claude가 다른 서비스는 이걸 어떻게 만들었는지 먼저 찾아보고, 그 근거로 설계와 코드를 내놓게 하는 것이 쓰임새입니다.

※ 이 글은 공식 문서와 공식 페이지(MCP 소개 페이지, 도움말 센터, 기계 판독용 안내 문서, OpenAPI 명세, 요금 페이지)를 보고 정리했습니다. 유료 계정이 있어야 해서 제가 직접 연결해 보지는 않았고, 공식 자료로 확인되지 않는 부분은 ‘모름’으로 적었습니다.

1. Nicelydone은 무엇이고 누구에게 맞나

Nicelydone은 공식 사이트의 구조화 데이터 기준으로 2015년에 시작한 SaaS 디자인 레퍼런스 라이브러리입니다. MCP 페이지에는 실제 화면 212,600장 이상, 사용자 흐름 8,000개 이상을 연결한다고 적혀 있습니다. 같은 사이트의 요금 페이지에는 "210,945 screens"로 나와 있어서 페이지마다 숫자가 조금 다릅니다. 지금 정확한 수치는 공식 페이지에서 직접 보는 편이 낫습니다.

Claude Code로 SaaS 화면이나 관리자 화면을 자주 만드는 개발자, 온보딩·결제 흐름을 설계하기 전에 경쟁 서비스를 조사하는 PM과 디자이너에게 맞습니다. 공식 설명에 따르면 화면마다 페이지 유형, UI 요소, 레이아웃 패턴 같은 구조화된 메타데이터가 붙어 있어서, Claude가 이미지보다 이 정보를 먼저 읽고 많은 화면을 빠르게 훑을 수 있습니다. 조사는 Claude가 하고 검토는 사람이 하는 방식입니다.

2. 출시·업데이트 정보

• MCP 출시일: 공식 자료에서 확인하지 못했습니다(모름).
• 서버 주소 변경: 예전 주소 https://nicelydone.club/mcp-server도 동작하지만, 새로 연결할 때는 https://mcp.nicelydone.club/mcp를 쓰라고 안내합니다(변경일 모름).
• 권한 범위(scope) 도입: 도입 전에 만든 연결은 예전 토큰이 거부되므로 다시 연결해야 합니다(도입일 모름).
• 에이전트 스킬 7개 공개(공개일 모름).

3. 주요 기능

공식 MCP 페이지는 도구 12개가 있다고 밝히고, 이를 6개 기능 묶음으로 나눠 소개합니다. 그런데 12개 도구의 정확한 이름과 입력값 전체는 공개 문서에 없습니다. 연결한 뒤 tools/list로 확인하라는 것이 공식 안내입니다. 공개 OpenAPI 명세에서 이름이 확인되는 도구가 4개뿐이라, 아래 표는 기능 묶음을 기준으로 정리했습니다.

공식 안내 문서에 따르면 검색은 카테고리, 레이아웃, 패턴, 컴포넌트, 동작, 상태, 테마 같은 분류로 좁힐 수 있습니다. 공식 예시 프롬프트 중에 "레이아웃 트리를 돌려 달라"는 것도 있지만, 실제로 어떤 형식으로 돌아오는지는 모릅니다.

함께 쓰는 에이전트 스킬

MCP와 짝을 이루는 스킬 7개가 공개돼 있습니다. Nicelydone(라우터), Research, Design UI, Design UX, Refine Typography, Write UI Copy, Review UI입니다. Claude Code·Codex·Cursor에서 쓰며, MCP가 연결돼 있으면 에이전트가 MCP 리소스로 스킬을 곧바로 읽습니다. 수동으로 설치하려면 Markdown을 받아 SKILL.md로 저장합니다(유료 플랜 필요).

4. 요금·조건

MCP는 유료 계정 전용입니다. 공식 MCP 페이지에 따르면 디자인 라이브러리를 여는 계정 그대로 MCP를 쓰고, 별도 API 키나 추가 요금은 없습니다. 기계 판독용 요금 문서(pricing.md)에 적힌 기본 가격은 아래와 같습니다.

• 같은 문서에 "방문 국가에 따라 현지 가격이 적용될 수 있다"는 문장이 있습니다. 제가 한국에서 연 요금 페이지에는 실제로 Solo가 연 결제 기준 월 $15(연 $180)로 나왔습니다. 최종 금액과 세금은 결제 화면을 따릅니다.
• Team 플랜 설명에 "MCP 월 호출 2배"라는 말이 있으니 월 호출 한도는 있는 것으로 보입니다. 다만 Solo의 정확한 한도 숫자는 모릅니다.

5. 연결 방법

공통 정보부터 적습니다. 전송 방식은 Streamable HTTP, 인증은 OAuth 2.1(동적 클라이언트 등록, PKCE)입니다. API 키나 환경 변수는 필요 없습니다. 처음 연결하거나 도구를 처음 부를 때 브라우저가 열리고, 거기서 로그인과 승인을 합니다.

Claude Code

1. 터미널에서 공식 문서의 명령을 그대로 실행합니다.

claude mcp add --transport http nicelydone https://mcp.nicelydone.club/mcp

2. Claude Code 안에서 /mcp를 입력하고 nicelydone을 고른 뒤 Authenticate로 브라우저 인증을 마칩니다.
3. 동의 화면에서 요청된 권한(library:read 등)을 확인하고 승인합니다.

예전 주소로 이미 연결해 두었다면 도움말 안내대로 지우고 다시 추가합니다.

claude mcp remove nicelydone
claude mcp add --transport http nicelydone https://mcp.nicelydone.club/mcp

claude.ai / Claude Desktop

1. 공식 MCP 페이지는 Claude Desktop에 대해 "원격 커넥터를 쓰라"고만 적고 있습니다. Claude의 설정 → 커넥터에서 커스텀 커넥터 추가를 누르고, 이름(예: Nicelydone)과 URL https://mcp.nicelydone.club/mcp를 넣습니다.
2. 연결 버튼을 누르면 Nicelydone 로그인과 권한 동의 화면이 열립니다. 유료 계정으로 승인합니다.
3. 원격 MCP를 지원하지 않는 예전 Desktop 버전이라면 공식 문서에 있는 mcp-remote 설정을 claude_desktop_config.json에 넣습니다.

{
  "mcpServers": {
    "nicelydone": {
      "command": "npx",
      "args": ["-y", "mcp-remote@latest", "https://mcp.nicelydone.club/mcp"]
    }
  }
}

claude.ai 웹 전용 안내는 공식 페이지에 없습니다(모름). 도움말은 연결이 됐는지 구체적인 질문 하나로 확인하고, 안 되면 로그인 상태, 다시 연결, 주소 일치 순서로 점검하라고 합니다.

6. 활용 예시 3가지

예시 1. 업그레이드(결제 유도) 화면 설계

상황: 무료 체험이 끝날 때 띄울 업그레이드 화면을 새로 만드는 경우입니다.

Nicelydone에서 SaaS 업그레이드 화면 5개를 찾아 비교해 줘.
체험 한도 안내, 플랜 혜택, 해지 안심 문구에 집중해서 표로 정리하고,
우리 앱(프로젝트 관리 도구)에 맞는 화면 구조를 제안해 줘.

Claude는 화면 검색 도구로 업그레이드·요금 관련 화면을 찾고, 각 화면의 메타데이터(UI 요소, 레이아웃)를 읽은 다음 필요한 화면 이미지를 봅니다. 그리고 세 기준으로 비교표와 제안을 씁니다.

비교표는 기획 문서에 붙이고, 이어서 "이 구조로 컴포넌트를 만들어 줘"라고 시키면 됩니다.

예시 2. 팀 초대 온보딩 흐름 조사

상황: 가입 직후 팀원을 초대하는 단계를 넣을지 정해야 하는 경우입니다.

이메일 인증과 팀 초대 단계가 들어간 온보딩 흐름을 찾아 줘.
각 흐름이 몇 단계인지, 초대를 건너뛸 수 있는지 정리해 줘.

Claude는 흐름 검색 도구로 여러 단계 흐름을 받아 단계별 화면을 보고, 단계 수와 건너뛰기 가능 여부를 정리합니다.

이 결과는 우리 흐름의 단계 수를 정하는 근거가 되고, 화면 문구는 Write UI Copy 스킬로 다듬을 수 있습니다.

예시 3. 관리자 화면 개편용 컬렉션 만들기

상황: 관리자 대시보드 개편 회의 전에 팀이 함께 볼 레퍼런스 모음이 필요한 경우입니다.

사이드바 레이아웃을 쓰는 대시보드 화면을 찾고, 그중 괜찮은 것을
"Admin redesign"이라는 새 컬렉션에 저장해 줘. 저장 전에 목록을 먼저 보여 줘.

Claude는 화면 검색으로 후보를 찾아 목록을 먼저 보여 주고, create-collection으로 컬렉션을 만든 뒤 add-screens-to-collection으로 화면을 넣습니다. 이 과정은 collections:write 권한을 승인한 연결에서만 됩니다.

만든 컬렉션은 Nicelydone 웹에서 열어 회의 자료로 쓰고, Team 플랜이면 팀 공유 컬렉션으로 같이 봅니다.

7. 쓸 때 기억할 5가지

1. 결정할 것과 기준을 같이 적습니다. "업그레이드 화면 보여 줘"보다 "체험 한도·혜택·해지 안심 문구 기준으로 5개 비교"라고 해야 쓸 만한 답이 나옵니다(도움말이 권하는 방식).
2. 분류어로 좁힙니다. 레이아웃(사이드바), 상태(빈 화면·오류), 테마(다크) 같은 단어를 넣으면 검색 범위가 줄어듭니다.
3. 권한은 필요한 만큼만 줍니다. 조사만 한다면 기본 library:read로 충분하고, 저장·수정이 필요할 때 따로 승인합니다.
4. 저장해 둔 레퍼런스를 씁니다. "내 즐겨찾기 기준으로 설정 화면 구성해 줘"처럼 요청하면 팀 취향이 들어갑니다(saved:read 필요).
5. 스킬과 묶습니다. 조사는 Research, 화면은 Design UI, 검수는 Review UI를 붙이면 같은 절차를 매번 되풀이할 수 있습니다.

8. 비슷한 도구와 비교

9. 주의할 점

• collections:write를 승인하면 Claude가 내 계정에 컬렉션을 만들고 고칠 수 있습니다. 필요할 때만 허용하세요.
• 권한 범위가 도입되기 전에 만든 연결은 동작하지 않으니 다시 연결해야 합니다.
• 월 MCP 호출 한도가 있는 것으로 보이지만 숫자는 모릅니다. 큰 조사를 돌리기 전에 계정 화면에서 확인하세요.
• 레퍼런스는 참고용입니다. 다른 서비스의 화면이나 문구를 그대로 베끼지 마세요.

10. 자주 묻는 질문

Q. 무료 계정으로 MCP를 쓸 수 있나요?
쓸 수 없습니다. 공식 문서 기준으로 유료 계정이 필요하고, 무료 계정으로 보낸 요청은 거부됩니다.

Q. API 키는 어디서 받나요?
필요 없습니다. 브라우저에서 OAuth로 로그인해 연결합니다.

Q. 12개 도구 이름을 전부 알 수 있나요?
공개 문서에는 일부만 나옵니다. 공식 안내는 연결한 뒤 tools/list로 확인하라는 것입니다.

11. 공식 페이지

관리자, 설정, 결제 화면을 자주 만든다면 만들기 전에 실제 SaaS 화면을 조사하는 일을 Claude에게 넘길 수 있습니다. 설정 방법과 가격은 바뀔 수 있으니 아래 공식 페이지에서 최신 내용을 확인하세요.

• MCP 안내: https://nicelydone.club/mcp
• 연결 도움말: https://nicelydone.club/help/integrations/mcp
• 요금: https://nicelydone.club/pricing