AI와 함께 45분 만에 나만의 링크트리 만든 이야기

소개

저는 기업의 기후변화 담당자로 일하면서 AI를 실질적인 업무에 활용하는 방법을 찾고 있습니다. 이번에 시도한 것은 단순히 결과물(링크트리 페이지)을 만드는 것이 아니라, AI와 협업하는 워크플로우 자체를 익히는 것이었습니다.

구체적으로는 세 가지를 해봤습니다.

AI에게 일하는 방식을 가르치는 CLAUDE.md 작성
코딩·디자인 지식 없이 대화만으로 링크트리 페이지 제작
이 흐름을 다음에도 재사용할 수 있는 스킬 파일로 저장

코딩을 몰라도 되고, 디자인 감각이 없어도 됩니다. 제가 한 것은 AI의 질문에 답하고, 마음에 안 드는 부분을 말로 알려주는 것뿐이었습니다.

진행 방법

사용 도구: VS Code + Claude Code (터미널에서 claude 명령어로 실행)

STEP 1. CLAUDE.md — AI 행동 지침서 만들기

아래 프롬프트를 그대로 Claude Code에 붙여넣었습니다.

이 폴더에 CLAUDE.md 파일을 만들어줘. 이 파일은 앞으로 이 폴더에서
작업할 때 너(AI)가 어떻게 행동할지 정해두는 학습 가이드야.

다음 내용을 담아줘:

## 이 폴더의 목적
사용자가 AI와 함께 학습하는 방식 자체를 익히는 곳.

## AI의 기본 태도
- 가르치는 강사가 아니라 함께 만드는 학습 메이트
- 사용자가 막연한 부분을 질문으로 끌어낸다
- 결과물보다 사용자가 "왜 이렇게 하는지" 이해하는 것에 집중

## 작업 방식 — PDCA 라이브코딩 사이클
1. Plan: 사용자가 원하는 걸 확인하고 동의 받기
2. Do: 작은 투두로 쪼개서 진행 상황을 보이면서 작업
3. Check: 결과를 사용자에게 보여주고 피드백 받기
4. Act: 피드백 받은 부분만 정확히 수정

이 파일 하나로 이후 모든 작업에서 AI가 PDCA 방식으로 행동했습니다. 도구 설정이 아니라 AI의 행동 자체를 정의한 것입니다.

STEP 2. 링크트리 만들기 — AI 인터뷰 방식

아래 프롬프트로 작업을 시작했습니다.

미니 링크트리(자기소개 페이지)를 index.html 한 개 파일로 만들고 싶어.

요구사항:
- 모바일 비율 (세로형, 최대 너비 420px)
- 구조: 원형 아바타 → 이름 → 한 줄 소개 → 링크 버튼 세로 정렬
- 디자인: Google Fonts 한글 폰트, 부드러운 그림자, hover 효과
- CSS는 inline (외부 파일 없이 한 파일로)

CLAUDE.md에 적힌 PDCA 방식대로 진행해줘.
바로 코드 짜지 말고, 자기소개 인터뷰랑 디자인 인터뷰부터 해줘.

[자기소개 인터뷰] 한 번에 하나씩 — 이름·소개·연결할 링크·아바타
[디자인 인터뷰] 트렌디한 스타일 6개 리스트 → 번호로 선택
→ 색감 팔레트 4~5개 리스트 → 번호로 선택

AI가 인터뷰를 시작했습니다. 저는 이렇게 답했습니다.

AI 질문

내 답변

이름

박동률

한 줄 소개

AI를 실질적 업무에 활용하고자 하는 기업 기후변화 담당자

링크

LinkedIn URL

아바타

지구환경·탄소중립 느낌 이모지 → 🌍 선택

디자인 스타일

어스톤 네이처 (자연 친화, Aesop 스타일)

색감 팔레트

샌드 & 세이지 (베이지 + 세이지 그린)

인터뷰 후 AI가 index.html을 생성했습니다.

STEP 3. 말로 수정하기 (Check → Act)

첫 결과물을 보고 이렇게만 했습니다.

색을 조금 더 파란 느낌으로 해주고,
링크드인 버튼을 좀 더 이쁘게 해줄 수 있나

AI가 즉시 반영한 변경 사항:

배경 → 하늘빛 그라데이션 (#E6EEF5 → #D8E8E2)
LinkedIn 버튼 → SVG 공식 로고 + 브랜드 블루 그라데이션 + 서브텍스트

생성된 최종 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>박동률</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
  <style>
    /* 전체 배경 */
    body {
      font-family: 'Noto Sans KR', sans-serif;
      background: linear-gradient(160deg, #E6EEF5 0%, #D8E8E2 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding: 48px 20px;
    }
    .card {
      width: 100%; max-width: 420px;
      display: flex; flex-direction: column; align-items: center;
    }
    /* 아바타 */
    .avatar {
      width: 96px; height: 96px; border-radius: 50%;
      background: linear-gradient(135deg, #4A8FA8, #3B7A6E);
      display: flex; align-items: center; justify-content: center;
      font-size: 44px;
      box-shadow: 0 8px 28px rgba(74,143,168,0.35);
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }
    .avatar:hover { transform: scale(1.06); }
    /* 링크드인 버튼 */
    .link-btn-linkedin {
      display: flex; align-items: center; width: 100%;
      padding: 16px 20px; border-radius: 16px;
      background: linear-gradient(135deg, #0A66C2, #0D7FDB);
      color: #fff; text-decoration: none; gap: 12px;
      box-shadow: 0 4px 16px rgba(10,102,194,0.35);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .link-btn-linkedin:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(10,102,194,0.45);
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="avatar">🌍</div>
    <h1 style="font-size:22px;font-weight:700;color:#1C3245;margin-bottom:10px;">박동률</h1>
    <p style="font-size:13.5px;color:#4A6475;text-align:center;line-height:1.7;margin-bottom:36px;">
      AI를 실질적 업무에 활용하고자 하는<br/>기업 기후변화 담당자
    </p>
    <div style="width:100%;">
      <a class="link-btn-linkedin"
         href="https://www.linkedin.com/in/dongryul-park-b4450b191"
         target="_blank" rel="noopener noreferrer">
        <span style="width:28px;height:28px;background:rgba(255,255,255,0.2);border-radius:7px;display:flex;align-items:center;justify-content:center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
          </svg>
        </span>
        <span>
          <div style="font-size:14px;font-weight:600;">LinkedIn</div>
          <div style="font-size:11px;opacity:0.75;">dongryul-park</div>
        </span>
        <span style="margin-left:auto;opacity:0.6;">→</span>
      </a>
    </div>
    <p style="font-size:11.5px;color:#7A9BAD;margin-top:36px;">기후와 AI, 두 가지를 연결합니다.</p>
  </div>
</body>
</html>

STEP 4. 스킬로 저장

방금 우리가 한 작업을 Claude Code 스킬로 저장해줘.
스킬 이름: intro-page
저장 위치: .claude/skills/intro-page/SKILL.md

AI가 .claude/skills/intro-page/SKILL.md 파일을 만들었습니다.

이제 다음번엔 이 한 줄로 동일한 작업을 처음부터 반복할 수 있습니다.

/intro-page 호출해서 진행해줘.

결과와 배운 점

배운 점 3가지

CLAUDE.md는 AI 행동 지침서다 — 도구 사용법이 아니라 AI가 일하는 방식 자체를 정의할 수 있습니다. 한 번 써두면 이후 모든 작업에 자동 적용됩니다.
코드가 아니라 대화로 만든다 — 디자인 스타일도 번호로 고르고, 수정도 말로 했습니다. AI가 선택지를 주니까 디자인을 모르는 사람도 쉽게 결정할 수 있었습니다.
잘 풀린 작업은 스킬로 저장하면 자산이 된다 — 한 번 완성한 워크플로우를 스킬 파일로 저장해두면 다음엔 한 줄 호출로 재현됩니다.

나만의 꿀팁

마음에 드는 디자인 스크린샷을 폴더에 넣고 "이런 느낌으로" 라고 알려주면 퀄리티가 훨씬 올라갑니다. Claude Code는 폴더 안 이미지를 직접 읽을 수 있습니다.

시행착오

처음엔 "링크트리 만들어줘"라고 바로 요청했는데, 결과가 너무 일반적이었습니다. CLAUDE.md를 먼저 만들고 인터뷰 방식으로 진행하니 제 상황에 딱 맞는 결과가 나왔습니다. 프롬프트 순서가 결과 퀄리티를 결정한다는 걸 배웠습니다.

앞으로의 계획

이 링크트리를 GitHub Pages에 올려서 실제로 공유하기
기후변화 관련 업무 보고서 초안 작성에도 같은 PDCA 워크플로우 적용해보기
스킬 파일을 더 쌓아서 나만의 AI 작업 라이브러리 만들기

도움 받은 글

부록 E. 보너스 실습 — 나만의 미니 링크트리 만들기 (본 실습 문서)

사진 캡처 자리(📸 표시)에 실제 스크린샷만 넣으면 바로 제출할 수 있는 상태입니다. 특정 섹션을 더 다듬거나 추가하고 싶은 내용 있으면 말씀해주세요.

🔥<24기 AI 스터디> 10/2 오후 3시까지 신청·변경 가능 🔥