AI로 프로필 링크 페이지 만들기 (링크트리 대신)

준비물

• 컴퓨터
• Claude 무료 계정 (claude.ai), 또는 ChatGPT 무료 계정
• 넣고 싶은 링크 목록 (블로그, 스토어, 인스타 등)
• 의뢰 문의를 받으려면 구글 계정 (구글 설문지는 무료)
• 프로필 사진을 넣는 경우에만 Netlify 무료 계정

이런 결과가 나옵니다

동그란 프로필 이미지, 이름과 한 줄 소개, 눌러서 이동하는 링크 버튼들, 밝게 보기와 어둡게 보기 전환, 맨 아래 의뢰 문의 버튼이 있는 페이지. 아래 예시는 가상 인물입니다.

따라 하기

1. 1

   넣을 링크 모아두기

   메모장에 "버튼 이름 - 주소"를 한 줄씩 적어둡니다. 주소는 인터넷 창 위쪽 주소창에서 복사합니다. 인스타그램은 프로필에 들어가 공유 메뉴의 "링크 복사"로 복사할 수 있습니다.

   이렇게 되면 성공6개 안팎의 이름과 주소가 메모장에 정리되어 있으면 됩니다.

2. 2

   claude.ai에 들어가 로그인하기

   인터넷 창에서 claude.ai 를 열고 로그인합니다. ChatGPT는 chatgpt.com 입니다.

   이렇게 되면 성공아래쪽에 글을 쓰는 대화창이 보이면 됩니다.

3. 3

   프롬프트 붙여넣고 보내기

   프롬프트의 이름, 한 줄 소개, 버튼 목록을 내 것으로 바꾼 뒤 붙여넣어 보냅니다. "의뢰 문의 설문지" 줄은 지금은 그대로 둡니다.

   붙여넣을 프롬프트프롬프트 복사

   내 프로필을 소개하는 링크 모음 페이지를 만들어줘. 파일 하나로 만들어줘.
   
   - 맨 위에 동그란 프로필 이미지 자리. 사진이 없으면 이름의 첫 글자를 넣은 동그라미로 해줘
   - 그 아래에 이름과 한 줄 소개
   - 눌러서 이동하는 버튼 6개. 아래에 적은 이름과 주소로 만들어줘
   - 위쪽에 밝게/어둡게 바꾸는 버튼. 한 번 고르면 다음에 열어도 그대로 기억해줘
   - 맨 아래에 "의뢰 문의" 버튼. 누르면 내가 만든 구글 설문지로 이동해
   - 휴대폰에서 먼저 보기 좋게. 버튼은 손가락으로 누르기 쉽게 크게
   - 카톡이나 인스타에 링크를 보냈을 때 미리보기에 내 이름과 한 줄 소개가 뜨게 해줘
   
   이름: 최민재
   한 줄 소개: 일러스트 작업을 합니다
   버튼 목록:
   1. 포트폴리오 - https://example.com/portfolio
   2. 인스타그램 - https://example.com/instagram
   3. 온라인 스토어 - https://example.com/store
   4. 블로그 - https://example.com/blog
   5. 뉴스레터 구독 - https://example.com/newsletter
   6. 이메일 - hello@example.com
   의뢰 문의 설문지: (나중에 알려줄게)

   내 것으로 바꿀 곳

   • 이름, 한 줄 소개, 버튼 이름과 주소를 모두 내 것으로 바꿉니다. 예시 주소는 연결되지 않습니다.
   • 버튼 개수는 늘리거나 줄여도 됩니다. 5~7개가 보기 좋습니다.
   • 색을 정하고 싶으면 "배경은 연한 베이지, 버튼은 진한 갈색"처럼 한 줄을 추가합니다.

   더 자세히 지시하고 싶다면 (조금 기술적인 버전)

   이 버전 복사

   프로필 링크 모음 페이지를 HTML 파일 하나로 만들어줘.
   - 상단 아바타(이미지 없으면 이니셜 원), 이름, 한 줄 소개
   - 버튼 링크 6개. 링크 목록은 파일 상단 배열(라벨, 주소)로
   - 라이트/다크 전환 토글, 선택 기억
   - 맨 아래 "의뢰 문의" 폼: 이름, 연락처, 의뢰 종류, 예산 범위, 내용. 전송 주소는 상단 상수로 두어 Formspree 같은 서비스에 연결 가능하게
   - og:title, og:description 메타 태그
   - 모바일 우선, 외부 라이브러리 없이

   이렇게 되면 성공Claude는 오른쪽 결과물 창에 내 이름과 링크 버튼이 있는 페이지가 나타납니다.

   팁ChatGPT에서 코드만 길게 나오면 "바로 볼 수 있게 Canvas로 보여줘"라고 말해보세요.

4. 4

   버튼 눌러보기와 말로 고치기

   결과물 창에서 버튼을 눌러 이동이 되는지 확인하고, 밝게/어둡게 버튼도 눌러봅니다. 고칠 점은 말로 합니다.

   이렇게 되면 성공버튼마다 맞는 곳으로 이동하고, 밝게/어둡게 전환이 되면 성공입니다.

   팁이렇게 말하면 됩니다. "버튼을 둥글게", "소개 글을 가운데 정렬", "배경을 연한 베이지로", "스토어 버튼을 맨 위로 올려줘"

5. 5

   의뢰 문의 설문지 만들기

   forms.google.com 에서 빈 설문지를 만듭니다. 질문은 이름, 연락처, 의뢰 종류(드롭다운), 예산 범위(드롭다운), 내용(장문형) 정도로 만듭니다. 오른쪽 위 "보내기"를 눌러 링크 모양 탭에서 주소를 복사합니다. 대화창에 "의뢰 문의 버튼을 이 주소로 연결해줘"라고 하고 주소를 붙여넣어 보냅니다.

   이렇게 되면 성공결과물의 의뢰 문의 버튼을 눌렀을 때 내 설문지가 열리면 성공입니다.

   팁응답은 설문지의 "응답" 탭에 쌓입니다. 새 응답을 이메일로 받으려면 응답 탭의 점 세 개 메뉴에서 알림을 켭니다.

6. 6

   프로필 사진을 넣을지 정하기

   이름 첫 글자 동그라미로 충분하면 건너뛰어도 됩니다. 사진을 넣으려면 "맨 위 이미지는 profile.jpg로 불러와줘"라고 말하고, 코드를 index.html로 저장해 사진과 같은 폴더에 둡니다.

   팁사진이 있으면 Claude Publish 대신 Netlify Drop으로 올려야 합니다. 순서는 아래 "링크로 공유하기"에 있습니다.

7. 7

   링크로 만들어 프로필에 넣기

   사진이 없으면 결과물 창 오른쪽 위 Publish(게시) 버튼으로 링크를 만듭니다. 사진이 있으면 폴더째 Netlify Drop에 올립니다. 자세한 순서는 아래 "링크로 공유하기"를 보세요. 만든 주소를 복사해 인스타그램 프로필 편집의 링크(웹사이트) 칸에 붙입니다.

   이렇게 되면 성공휴대폰에서 인스타 프로필의 링크를 눌렀을 때 내 페이지가 열리면 완성입니다.

막히면

다음에 해볼 것

• 내 도메인(예: minjae.kr)을 연결하면 인스타 프로필 주소가 짧고 깔끔해집니다.
• 링크가 늘면 카테고리별로 접고 펴는 섹션을 말로 추가해보세요.

여기 쓰인 기능

다른 레시피