추가 실습 · 나만의 링크 인 바이오

30~40분권장 실습 시간

3단계말하기·확인하기·통제하기

5개사람이 직접 확인할 항목

0원유료 서비스 없이 완성

이 실습에서 만드는 것

나만의 링크 인 바이오 페이지

해결할 문제 · Linktree라는 서비스를 아시나요? 인스타그램 프로필에는 여러 외부 링크를 등록할 수 있지만, 블로그·유튜브·포트폴리오·이메일을 하나의 디자인으로 정리하고 싶을 때 링크 모음 페이지가 유용합니다. Linktree는 이런 페이지를 만들어 주는 대표적인 서비스입니다. 기본은 무료지만 핵심 기능은 유료인데, 우리는 무료로 만들겠습니다.

최종 사용자 · 인스타그램 프로필의 링크를 눌러 들어오는 팔로워.

최종 모습 · 이름·한 줄 소개·원형 프로필 이미지와 링크 버튼 5개가 놓인 모바일 최적화 페이지. 게시하면 URL 하나로 배포됩니다.

준비물 · Claude 웹의 아티팩트(앱 및 웹사이트) 하나. 네 번째 실습이니, 3단계 과정이 이제 익숙해질 때입니다.

말하기요구사항 7개와 완성 조건 5개를 함께 적어 한 번에 요청합니다.

확인하기버튼·아이콘·원형 이미지·모바일 폭을 사람이 직접 확인합니다.

통제하기실제 링크로 바꾸고 다크 모드를 붙인 뒤 처음부터 다시 검증합니다.

실습 흐름

단계별 실습

1단계

말하기

요구사항과 완성 조건을 함께 말한다

10~15분 · 펼치기⌄

아티팩트에서 “앱 및 웹사이트”를 새로 만듭니다. 다음의 프롬프트를 대화창을 통해서 실행합니다.

Linktree 같은 "내 링크 모음" 웹페이지를 만들어줘. 요구사항: 1. 상단에 내 이름과 한 줄 소개 2. 프로필 이미지 자리 (원형) 3. 링크 버튼 5개: 인스타그램, 블로그, 유튜브, 포트폴리오, 이메일 4. 각 버튼에 아이콘 포함 5. 디자인: 깔끔한 미니멀, 배경은 연한 그라데이션 6. 모바일 최적화 7. 한국어로 ★ 완성 조건 (전부 충족해야 완성): - 5개 버튼이 모두 보이고, 각각 클릭 가능할 것 - 모바일 화면(375px)에서 버튼이 겹치거나 잘리지 않을 것 - 프로필 이미지 자리가 원형으로 표시될 것 - 각 버튼에 아이콘이 표시될 것 - 이름과 한 줄 소개를 메모장으로 쉽게 바꿀 수 있도록 코드 상단에 수정 위치가 표시되어 있을 것

아티팩트에서 왼쪽과 같이 대화창에 요청한 작업을 수행하면, 오른쪽에 나만의 링크 모음이 만들어진 것을 확인할 수 있습니다.

아티팩트 대화창의 요청으로 오른쪽에 만들어진 링크 모음 페이지 — 그림 1 · 왼쪽 대화창의 요청으로 오른쪽에 만들어진 링크 모음 페이지

📌 NOTE — 아티팩트 게시 = 가장 간단한 "배포"완성된 아티팩트의 "게시" 버튼을 누르면 claude 도메인의 URL이 생성됩니다. 이 URL을 인스타그램 프로필의 "웹사이트" 칸에 등록하면, 누구든 당신의 프로필을 방문할 때 링크 페이지를 볼 수 있습니다. 서버를 빌리거나 도메인을 구매할 필요가 없습니다. URL 하나만 복사하면 끝입니다. 이것이 Part 4에서 배울 본격적인 배포의 가장 간단한 예고편입니다.

다음 단계로 넘길 것 · 만들어진 링크 페이지 아티팩트와 ★ 완성 조건 5개 → 2단계 확인하기

2단계

확인하기

완성 조건을 사람이 직접 눌러본다

10분 · 펼치기⌄

아티팩트가 나타나면 완성 조건을 하나씩 확인합니다.

링크 버튼 5개가 모두 보이고 각각 클릭 가능한가?
각 버튼에 아이콘이 표시되어 있는가?
프로필 이미지 자리가 원형으로 표시되는가?
브라우저 창을 좁게 줄여도(또는 F12 → 모바일 뷰) 버튼이 겹치거나 잘리지 않는가?
코드 상단에 이름·소개·링크 주소의 수정 위치가 주석으로 표시되어 있는가?

다음 단계로 넘길 것 · 통과한 항목과 고쳐야 할 항목의 목록 → 3단계 통제하기

3단계

통제하기

내 정보로 바꾸고 기능을 더한다

15분 · 펼치기⌄

실제 정보로 바꾸고, 디자인을 발전시켜달라고 요청합니다.

원하는 스타일을 말로 설명하면, 그에 맞춰 디자인을 즉시 새로운 분위기로 변형할 수 있습니다. 예를 들어 기본 미니멀 디자인이 심심하게 느껴진다면, "바이올린 연주자이다. 주로 클래식을 연주한다. 이에 맞춰서 디자인을 바꿔달라. 색상은 어둡지 않고 밝으면 좋겠고, 폰트와 아이콘은 클래식한 분위기에 맞추면 좋겠다"와 같이 요청할 수 있습니다.

클래식 연주자 콘셉트로 분위기가 바뀐 링크 페이지 — 그림 2 · 말 한마디로 클래식 연주자 콘셉트로 바뀐 디자인

실제 정보를 바꾸고 기능을 개선하기 위해서 다음의 프롬프트를 대화창을 통해서 Claude에게 요청합니다.

다음의 3가지 작업을 수행해줘. 디자인 컨셉을 유지하면서 수정 사항을 반영해줘. 작업1: 링크 정보를 다음으로 바꿔줘: 이름: "민수" 소개: "마케터 · 콘텐츠 크리에이터" 인스타그램: https://instagram.com/youngjin_minsoo 블로그: https://blog.naver.com/youngjin_minsoo 유튜브: https://youtube.com/@youngjin_minsoo 포트폴리오: https://notion.so/youngjin_minsoo 이메일: youngjin_minsoo@email.com 작업2: 다크 모드 토글 버튼을 추가해줘. 버튼을 누르면 배경이 어두운 색으로 바뀌고, 버튼을 다시 누르면 배경이 흰색으로 바뀌게 해줘 작업3: 페이지 하단에 방문자 수 카운터를 추가해줘. 페이지를 열 때마다 숫자가 1씩 올라가게 해줘

수정 후에는 링크가 제대로 동작하는지, 다크 모드는 제대로 동작하는지 등을 확인합니다. 당연히 2단계의 확인 항목을 처음부터 다시 한 번 검증합니다.

실제 링크 정보와 다크 모드, 방문자 수 카운터가 반영된 완성 페이지 — 그림 3 · 실제 정보·다크 모드·방문자 수 카운터가 반영된 완성 페이지

마음에 들면 게시합니다. 생성된 URL을 인스타그램 프로필의 "웹사이트" 칸에 등록하세요. 이제 누군가 당신의 인스타 프로필을 방문하면, 당신이 만든 링크 페이지를 보게 됩니다.

📌 NOTE — 방문자 수 카운터의 한계여기서 한 가지, 아티팩트에는 방문 기록을 모아 관리하는 서버(데이터를 저장하는 컴퓨터)가 갖춰져 있지 않아, 진짜 방문자 수를 세기 어렵습니다. 방문자마다 각자의 브라우저에서만 세어질 뿐, 전체 방문자가 합산되지 않습니다. 진짜 방문자 집계는 Part 4에서 배우는 서버가 필요합니다.

완료 · URL 하나로 배포가 끝납니다. 다만 재검증 없이 게시하지 않는 것이 이 실습의 핵심입니다.

이 실습의 특별한 점

① 유료 기능을 무료로Linktree는 기본은 무료지만 핵심 기능은 유료 요금제입니다. 여기서 만든 링크 페이지는 완전 무료입니다.

② 링크 하나가 다섯 개의 문인스타그램 프로필에 URL 하나만 등록하면 모든 팔로워가 당신의 블로그, 유튜브, 포트폴리오에 한 번에 접근할 수 있습니다.

③ 배포의 예고편서버도 도메인도 없이 게시 버튼 하나로 공개됩니다. Part 4에서 배울 본격적인 배포의 가장 간단한 형태입니다.

💡 TIP — "수정 위치 표시"를 요구한 이유완성 조건의 마지막 항목 "코드 상단에 수정 위치가 표시되어 있을 것"은 Part 3 하네스 엔지니어링에서 나오는 기법입니다. AI가 코드에 // ★ 여기를 수정하세요 같은 주석을 남기면, 프로그래밍을 몰라도 어디를 고쳐야 하는지 바로 찾을 수 있습니다. 아티팩트 상태에서는 그 부분을 Claude에게 말로 바꿔 달라고 요청하면 되고, HTML 파일로 내려받아 쓸 때는 메모장으로 직접 바꿀 수도 있습니다.

💡 TIP — 링크 인 바이오 말고 다른 용도로도 쓸 수 있습니다"개인 링크 모음"을 "팀 리소스 허브", "동아리 안내 페이지", "프리랜서 서비스 목록"으로 바꿀 수 있습니다. 프롬프트에서 "링크 버튼 5개"의 내용을 "회의록, 공유 드라이브, 출석부, 공지사항, 회비 계좌"로만 바꾸면 됩니다. 디자인도 "미니멀"을 "활기찬 동아리 분위기"로 바꿔달라고 하면 완전히 다른 페이지가 됩니다.