인스타그램 프로필 링크 트리 CSS 빌더 수식과 모바일 랜딩페이지 가이드

2026년 7월 23일

프로필 정보와 원하는 다중 링크 목록을 입력하고 감각적인 글래스모피즘 모바일 링크트리 HTML/CSS 코드를 즉시 추출해 보세요.

인스타그램 바이오 프로필, 트위터, 틱톡의 단 1개 허용되는 외부 링크 URL(Link in Bio) 공간에 **나의 블로그, 유튜브, 오픈채팅, 스마트스토어, 포트폴리오 다중 링크 랜딩페이지를 직접 만들고 코드(HTML/CSS)를 추출하는 솔루션이 바로 인스타그램 프로필 링크 트리 CSS 빌더(Simple Link Tree Builder)**입니다.

월 구독료가 드는 사제 외부 링크트리 서비스(Linktree 등) 대신, 순수 자바스크립트와 모던 CSS Glassmorphism 및 모바일 반응형 flexbox 스타일로 디자인된 나만의 모바일 웹 랜딩페이지 코드를 생성하여 GitHub Pages나 개인 서버에 무료로 배포할 수 있습니다. 본 글에서는 링크트리 랜딩페이지 레이아웃 수식과 CSS 코드를 해설합니다.

1. 모바일 반응형 링크 카드 비율 수식 공식

모바일 디바이스 뷰포트 너비 W_vp (360px ~ 430px 기준)와 최대 링크 카드 너비 W_card (max 400px), 그리고 카드 간 세로 패딩 P_gap 간의 레이아웃 수식 공식은 다음과 같습니다:

[ W_{\text{card}} = \min(W_{\text{vp}} - 2 \times P_{\text{margin}}, 400\text{px}) ]

[ H_{\text{total}} = H_{\text{profile}} + N_{\text{links}} \times (H_{\text{item}} + P_{\text{gap}}) ]

링크트리 랜딩페이지 3대 스타일 디자인 요소:

프로필 아바타 둥근 이미지 (Border Radius 50%): 80x80px 원형 이미지와 브랜드 닉네임, 한 줄 소개글 배치.
글래스모피즘(Glassmorphism) 카드 버튼: backdrop-filter: blur(12px)와 반투명 흰색 보더로 입체감 형성.
호버 및 터치 애니메이션: 버튼 클릭 시 transform: translateY(-2px)와 그림자 강도가 고조되는 유기적 터치 반응.

2. 링크트리 HTML/CSS 자동 생성 자바스크립트 알고리즘 소스

다음은 입력받은 링크 제목과 URL 배열을 바탕으로 가볍고 깔끔한 HTML/CSS 코드를 일괄 추출하는 소스 코드입니다:

function generateLinkTreeHtml(profileData, linkList) {
  let linksHtml = '';
  linkList.forEach(link => {
    linksHtml += '<a href="' + link.url + '" class="link-card" target="_blank" rel="noopener noreferrer">
' +
      '  <span class="link-icon">' + (link.icon || '🔗') + '</span>
' +
      '  <span class="link-title">' + link.title + '</span>
' +
      '</a>
';
  });

  return '<!DOCTYPE html>
' +
    '<html lang="ko">
' +
    '<head>
' +
    '  <meta charset="UTF-8">
' +
    '  <meta name="viewport" content="width=device-width, initial-scale=1.0">
' +
    '  <title>' + profileData.name + ' - LinkTree</title>
' +
    '  <style>
' +
    '    body { font-family: -apple-system, sans-serif; background: #0f172a; color: #fff; margin: 0; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; }
' +
    '    .profile-img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #38bdf8; }
' +
    '    .profile-name { font-size: 20px; font-weight: 700; margin-top: 12px; }
' +
    '    .link-container { width: 100%; max-width: 400px; margin-top: 24px; display: flex; flex-direction: column; gap: 14px; }
' +
    '    .link-card { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: #fff; text-decoration: none; font-weight: 600; backdrop-filter: blur(8px); transition: all 0.2s; }
' +
    '    .link-card:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
' +
    '  </style>
' +
    '</head>
' +
    '<body>
' +
    '  <img src="' + profileData.avatar + '" class="profile-img" alt="Profile" />
' +
    '  <div class="profile-name">' + profileData.name + '</div>
' +
    '  <div class="link-container">
' + linksHtml + '  </div>
' +
    '</body>
' +
    '</html>';
}

[!NOTE] 매달 무료 플랜의 제한된 디자인이나 외부 브랜드 로고가 박힌 타사 링크 서비스에 의존할 필요 없이, 인스타그램 프로필 링크 트리 CSS 빌더 도구를 활용하면 100% 내 맘대로 디자인한 링크 랜딩페이지 코드를 생성하여 무료 배포할 수 있습니다.

인스타그램 프로필 링크 트리 CSS 빌더

프로필 정보와 원하는 다중 링크 목록을 입력하고 감각적인 글래스모피즘 모바일 링크트리 HTML/CSS 코드를 즉시 추출해 보세요.

상단 1번 링크 강조 애니메이션: 가장 중요한 목표 링크(예: '스마트스토어 신상품 구매')의 경우 펄스(Pulse) 줌 애니메이션이나 눈에 띄는 포인트 컬러(#38bdf8) 배경을 주어 클릭 전환율(CTR)을 40% 이상 향상시킬 수 있습니다.
소셜 파비콘 및 이모지 아이콘 배치: 링크 카드 텍스트 좌측에 유튜브, 블로그, 인스타그램 이모지 아이콘을 직관적으로 붙여주면 사용자가 목적지 페이지를 0.1초 만에 식별하여 이탈률을 낮춰줍니다.

1. 모바일 반응형 링크 카드 비율 수식 공식

링크트리 랜딩페이지 3대 스타일 디자인 요소:

2. 링크트리 HTML/CSS 자동 생성 자바스크립트 알고리즘 소스

3. 실무 SNS 프로필 전환율(Conversion) 극대화 지침