안녕하세요, 재밋 마케팅팀 제이입니다. 지난 번 모바일 청첩장에 이어, 링크트리를 직접 만드는 방법을 찾는 분들이 많아서 이번에는 제가 링크트리를 만들어봤습니다. 링크트리는 인스타그램 프로필처럼 링크를 하나만 걸 수 있는 곳에 필요한 링크를 한데 모아 보여주는 페이지예요.
재밋 인스타그램 프로필에는 리틀리로 만든 링크 모음 페이지가 걸려 있는데, 이 페이지를 재밋과 클로드로 다시 만들었어요. 재밋은 대화만으로 홈페이지를 만드는 AI 웹빌더로, 클로드나 ChatGPT 같은 AI에 MCP로 연결하면 채팅창에서 바로 사이트를 만들고 고칠 수 있습니다.
결론부터 말씀드리자면, 같은 링크로 두 가지 버전을 만들었습니다. 1번은 기존 리틀리 페이지를 레퍼런스로 삼아 제작한 버튼형이고, 2번은 카드형이에요. 이번 글에서는 링크트리를 만드는 법과 기존 링크트리를 개선한 두 가지 버전에 대해 차례대로 말씀드릴게요.
항목 | 내용 |
|---|---|
제작물 | 재밋 공식 링크트리 (링크 모음 페이지) |
도구 | 재밋 MCP + 클로드 |
버전 1 | 버튼형: 기존 리틀리 페이지를 레퍼런스로 재구성 |
버전 2 | 카드형: 새로운 레퍼런스로 구성 |
링크트리 만드는 방법
링크트리는 아래 순서로 만들었습니다.
단계 | 한 일 |
|---|---|
빈 사이트 만들기 | 재밋에서 링크트리용 빈 사이트를 새로 만들었습니다 |
클로드에 MCP 연결 | 재밋에서 받은 MCP 연결 주소를 클로드 커넥터에 추가하고 로그인했어요 |
레퍼런스 보기 | 잘 만든 링크트리 사례와 버튼형, 카드형 비교 시안을 요청했습니다 |
기존 페이지 진단 | 기존에 제작된 링크트리 페이지를 보고 문제점을 파악했습니다 |
링크 가져오기 | 기존 링크트리 URL을 주고 버튼 이름과 연결 주소를 가져오게 했습니다 |
페이지 만들기 | 버전 1은 메인 페이지에, 버전 2는 같은 사이트의 별도 페이지에 만들었어요 |
화면 확인, 수정 | 휴대폰과 PC에서 직접 열어보고 어색한 부분을 고쳤습니다 |
사이트 만들고 클로드에 연결하기
MCP 연결은 사이트마다 따로 해야 니다. 클로드에 다른 재밋 사이트가 이미 연결돼 있다면, 링크트리 사이트용 커넥터를 새로 추가해야 해요. 저도 기존 커넥터가 다른 사이트와 연결돼 있어서 하나를 더 추가했습니다.
연결 방법은 재밋 MCP 연결 가이드에 정리돼 있어요. 연결을 마치면 클로드 채팅창에서 사이트 구성을 조회하고 페이지를 바로 만들 수 있습니다.
기존 링크트리는 무엇이 문제였을까요?
링크는 제대로 있었지만, 전체적으로 정리가 잘 된 느낌은 아니었어요.
먼저, 어떤 링크가 더 중요한지 한눈에 구분되지 않았고 버튼 모양이 상이한 점이 문제라고 판단했습니다. 구체적으로는 다음과 같습니다.
로고가 화면 위쪽을 크게 차지하고, 그 아래 빈 공간이 큽니다
가장 중요한 "Zaemit 사용하러 가기"가 다른 버튼과 똑같은 모양이라 눈에 띄지 않습니다.
버튼 4개에 같은 Z 아이콘이 반복돼서 아이콘이 아무 정보도 주지 않습니다
아이콘이 있는 버튼과 없는 버튼, 혼자 높이가 긴 공모전 버튼, 앞뒤에 붙은 이모지가 섞여 있습니다
저도 자주 보던 페이지라 익숙했는데, 하나씩 살펴보니 개선할 부분이 있다고 생각이 들었습니다.
링크트리 디자인, 버튼형과 카드형은 어떻게 다를까요?
링크트리 레퍼런스를 찾아달라고 했어요. 클로드는 실제 서비스 사례와 함께, 같은 내용을 두 방식으로 구성한 비교 시안을 보여줬어요.
구분 | 버튼형 | 카드형 |
|---|---|---|
모양 | 세로로 쌓인 버튼 | 크기가 다른 카드를 바둑판처럼 배치 |
장점 | 대표 버튼 하나만 강조하면 무엇을 눌러야 할지 바로 보입니다 | 사진, 설명을 카드에 담아 브랜드 분위기가 잘 드러납니다. |
단점 | 이미지가 적어 단조롭습니다 | 시선이 카드마다 흩어집니다 |
저는 두 방식을 모두 만들어보기로 했어요.
버전 1. 버튼형 링크트리 만들기
1번은 기존 리틀리 페이지를 레퍼런스로 삼았습니다.
1. 시안으로 방향성 정하기
클로드는 사이트를 바로 고치지 않고, 대화창에 시안을 먼저 그려 보여줬어요. 앞에서 짚은 문제를 어떻게 개선할지 화면으로 확인한 뒤에 실제 페이지를 만들었습니다.
2. 구성 바꾸기
바꾼 점은 다음과 같습니다.
로고를 앱 아이콘 크기로 줄이고, 이름, 소개, 인스타그램 아이콘을 첫 화면에 담았습니다
"Zaemit 시작하기" 하나만 흰색 버튼으로 강조했습니다
11/1 마감인 교육 신청은 마감 배지를 단 별도 버튼으로 바로 아래에 뒀어요
나머지 링크는 둘러보기(제작 사례, 공모전 수상작, 재밋 소식)와 시작 가이드(온라인 소개서, MCP 연결 방법, 자주 묻는 질문)로 묶었습니다
버튼마다 내용에 맞는 아이콘을 따로 붙이고, 모양과 정렬 구조를 하나로 통일했습니다
버전 2. 카드형 링크트리 만들기
2번은 다른 레퍼런스를 바탕으로 만든 카드형이에요. 크기가 다른 카드를 바둑판처럼 배치하는 레이아웃으로, 도시락 칸을 닮았다고 해서 벤토 그리드라고 부릅니다.
2번은 기존 링크트리가 없다고 가정하고, 다른 디자인 레퍼런스로 새 버전을 만들어 달라고 했어요. 클로드가 레퍼런스를 다시 찾아 네 가지 방향을 제안했습니다.
방향 | 대표 레퍼런스 | 특징 |
|---|---|---|
카드형 (벤토 그리드) | Framer "Now", GridLink | 크기가 다른 카드를 바둑판처럼 배치해 작은 홈페이지 느낌 |
피처드 카드형 | Ultralink Bio, Inlink | 대표 콘텐츠를 이미지 카드나 넘겨 보는 카드로 크게 노출 |
라이트 미니멀형 | Simplink, Linqs | 흰 배경에 큰 글자와 넉넉한 여백 |
SaaS 허브형 | UniLink | 진행 중, 시작하기, 살펴보기, 도움처럼 목적별로 섹션을 나눔 |
저는 이 중 카드형을 골랐어요. 재밋은 웹사이트를 만드는 서비스라 "이런 페이지도 만들 수 있다"를 보여주기 좋고, 1번 버튼형과도 확실히 달라 보였거든요.
1. 카드 배치 정하기
1번은 메인에 그대로 두고, 같은 사이트에 별도 페이지로 추가해서 두 버전을 비교할 수 있게 했습니다.
카드 크기를 중요도에 따라 다르게 했습니다. PC에서는 4칸, 모바일에서는 2칸으로 배치돼요
큰 카드: 프로필, 검은색 "Zaemit 시작하기", 파란 톤의 교육 신청 공지
작은 정사각 카드: 공모전 수상작·재밋 소식·인스타그램·자주 묻는 질문
가로 카드: 온라인 소개서·MCP 연결 방법
맨 아래 긴 카드: 재밋으로 만든 내 사이트 소개 신청
2. 제작 사례를 실제 사이트로 채우기
초안에는 "제작 사례" 카드에 회색 미니 썸네일이 들어가 있었어요. 이 자리를 실제 사이트로 바꾸고 싶어서 재밋으로 제작된 사이트를 넣었어요.
사이트 | 업종 |
|---|---|
PACE/LINE | 러닝 기능성 웨어 브랜드 |
OFF FRAME | 서울 현대미술 축제 |
STILLHEAT | 1인 프라이빗 사우나 |
MAISON NOIR | 빈투바 쇼콜라티예 |
썸네일을 누르면 각 사이트로 바로 이동하고, 오른쪽 위 "제작 사례 전체 보기" 버튼으로 쇼케이스 페이지에도 갈 수 있어요. 링크가 14개로 늘었지만 클로드가 연결 주소를 모두 확인했습니다. 어떤가요? 버튼만 있을 때보다 재밋으로 어떤 사이트를 만들 수 있는지 한눈에 보이지 않나요?
정리하며
기존 링크트리를 재밋과 클로드로 다시 만들었습니다. 1번은 기존 페이지를 레퍼런스로 대표 버튼 하나를 강조하고 링크를 목적별로 묶은 버튼형이고 2번은 벤토 그리드 레퍼런스로 재밋 쇼케이스의 실제 사이트를 보여주는 카드형이에요.
제작한 링크트리는 여기서 보실 수 있습니다.
직접 만들어보고 싶으신 분들은 재밋에서 계정을 만들고, 쓰던 AI에 MCP를 연결하면 이 글과 같은 방식으로 시작할 수 있어요. 어느 버전이 인스타그램 프로필에 걸릴지는 아직 고민 중입니다.
자주 묻는 질문
재밋으로 링크트리를 만들 수 있나요?
네, 가능합니다. 이번 링크트리도 재밋에 빈 사이트를 만들고 클로드와 대화하며 페이지를 채웠습니다. 버튼 구성, 카드 배치, 링크 연결까지 모두 프롬프트로 처리했어요.
만든 링크트리를 인스타그램 프로필에 걸 수 있나요?
네, 가능합니다. 재밋 사이트는 만들면 바로 공개 주소가 생기고, 인스타그램 프로필 편집에서 링크 자리에 이 주소를 넣으면 됩니다.
버튼형과 카드형 중 무엇이 나을까요?
목적에 따라 다릅니다. 방문자가 눌렀으면 하는 버튼이 분명하다면 버튼형, 결과물이나 상품을 보여주는 게 중요하면 카드형이 맞습니다.