이 글은 누구를 위한 것인가
- 프로필·링크 모음 같은 페이지를 사용자가 직접 만드는 서비스를 설계 중인 팀
- 자유 배치 편집기를 넣을지 템플릿으로 갈지 결정해야 하는 상황
- 링크가 늘어나면서 페이지가 지저분해진다는 피드백을 받은 경우
들어가며
링크 모음 페이지의 레이아웃은 사실상 두 갈래로 나뉜다.
[선형 목록] [자유 캔버스]
┌──────────────┐ ┌──────────────┐
│ 프로필 │ │ ┌───┐ ┌──┐ │
├──────────────┤ │ │ │ │ │ │
│ 링크 버튼 1 │ │ └───┘ └──┘ │
├──────────────┤ │ ┌────────┐ │
│ 링크 버튼 2 │ │ │ │ │
├──────────────┤ │ └────────┘ │
│ 링크 버튼 3 │ └──────────────┘
└──────────────┘
만들기 쉽다 표현력이 높다
결과가 항상 정돈된다 결과가 사용자에 따라 갈린다
링크 20개 넘으면 무너진다 링크 20개도 구조화 가능
어느 쪽이 옳은가는 "사용자가 무엇을 만들려 하는가"에 달렸다. 링크 5개를 프로필에 거는 사람과, 주제별로 자료를 큐레이션하는 사람은 전혀 다른 도구가 필요하다.
이 글은 그 판단 기준을 정리한다.
1. 선형 목록이 무너지는 지점
선형 목록의 장점은 명확하다. 편집이 쉽고, 누가 만들어도 결과가 깔끔하며, 모바일에서 그대로 작동한다.
무너지는 지점도 명확하다.
[링크 개수별 체감]
1~5개 최적. 스크롤 없이 전부 보임
6~10개 양호. 한 번 스크롤
11~20개 위계가 사라짐 — 전부 같은 무게로 보인다
20개 초과 사용자가 목록을 훑지 않고 이탈
11개 지점이 중요하다. 여기서부터 "모든 링크가 똑같이 생긴 버튼"이라는 구조 자체가 문제가 된다. 사용자는 무엇이 중요한지 알 수 없고, 만든 사람은 순서를 바꾸는 것 말고 강조할 방법이 없다.
선형을 유지하면서 이 문제를 완화하는 수단은 셋이다.
① 섹션 구분 "음악" / "굿즈" / "문의" 로 그룹핑
② 강조 슬롯 상단 1~2개는 큰 카드, 나머지는 작은 버튼
③ 접기 하위 그룹을 기본 접힘으로
②가 실질적으로 가장 효과가 크다. 모든 항목을 동등하게 두는 것이 위계 부재의 원인이므로, 크기 차이를 두는 것만으로 첫 화면의 정보 구조가 생긴다.
③은 점진적 공개 원칙의 적용인데, 링크 페이지에서는 조심해야 한다. 접힌 링크는 클릭률이 크게 떨어지므로, 접을 것과 펼칠 것의 선택 자체가 만든 사람의 의사결정이 되어야 한다. 자동으로 접으면 안 된다.
2. 자유 캔버스의 진짜 비용
자유 배치는 표현력을 준다. 대신 편집 난이도와 결과물 품질의 분산이라는 비용이 따른다.
[자유 배치 도입 시 실제로 생기는 일]
상위 20% 사용자 → 선형으로는 불가능한 좋은 페이지를 만든다
중위 60% → 선형과 비슷하거나 조금 나은 결과
하위 20% → 겹치고 잘리고 모바일에서 깨진 페이지
하위 20%가 문제의 전부다. 이들이 만든 페이지는 서비스 전체의 인상을 결정하고, 공개 페이지라면 검색에도 노출된다.
해법은 자유도를 없애는 게 아니라 실패를 구조적으로 막는 것이다.
· 그리드 스냅 자유롭게 놓되 격자에 맞춰짐
· 겹침 방지 요소가 겹치면 자동으로 밀어냄 (또는 경고)
· 캔버스 경계 바깥으로 나가지 못하게
· 모바일 자동 재배치 출력 시 좌표를 1열로 정규화
마지막 항목이 특히 중요하다. 데스크톱에서 자유 배치한 결과를 모바일에서 그대로 축소하면 읽을 수 없다. 편집은 자유롭게 하되, 좁은 화면에서는 좌표 순(위→아래, 좌→우)으로 재배열해 1열로 흘리는 것이 현실적인 답이다.
이런 구조를 택한 제품을 보면 설계 의도가 읽힌다. Linkme의 링크 페이지 소개는 "링크만 모을 때보다 더 하는 것"을 내세우는데, 단순 목록형 서비스와의 차별점을 캔버스 편집과 협업에 두면서도 바이오 URL 하나로 쓸 수 있는 단순한 형태를 함께 제공한다. 두 모드를 병렬로 두는 것 — 이것이 3절의 결론이기도 하다.
3. 둘 중 하나를 고를 필요가 없다
실무에서 가장 나은 답은 대개 기본은 선형, 원하면 자유다.
[단계적 자유도]
Level 0 템플릿 선택 + 링크 입력만
→ 처음 만드는 사용자. 3분 안에 완성
Level 1 섹션 구분 + 강조 슬롯
→ 링크가 10개를 넘긴 사용자
Level 2 자유 배치 캔버스
→ 표현이 필요한 사용자만 진입
Level 2를 기본값으로 두지 않는 것이 핵심이다. 자유 배치 편집기를 첫 화면에 두면, 링크 5개만 걸려던 사용자가 빈 캔버스 앞에서 이탈한다.
승급 시점을 제품이 제안할 수도 있다.
링크가 11개가 되면:
"항목이 많아졌어요. 섹션으로 나눠볼까요?" [섹션 만들기]
섹션이 3개가 되면:
"자유 배치로 더 정리할 수 있어요." [캔버스로 전환]
되돌아갈 수 있어야 한다. 캔버스로 전환한 뒤 다시 선형으로 돌아가려는데 좌표 정보가 날아가면 사용자는 전환 자체를 두려워한다. 선형 ↔ 캔버스 왕복이 무손실이 되도록, 내부 데이터 모델은 순서 + 좌표를 모두 보관해야 한다.
4. 첫 화면 — 무엇을 보여줄 것인가
레이아웃 방식과 무관하게, 링크 페이지의 성패는 스크롤 없이 보이는 영역에서 갈린다.
[첫 화면 우선순위]
1. 이 페이지가 누구/무엇인지 프로필 이미지 + 한 줄
2. 가장 중요한 행동 1개 만든 사람이 지정
3. 그다음 2~4개 나머지는 스크롤 아래로
✗ 링크 12개를 균등하게 나열
✗ 큰 배너 이미지가 첫 화면을 다 먹음
2번의 "가장 중요한 행동 1개"를 만든 사람이 명시적으로 고르게 하는 것이 좋다. 자동으로 첫 번째 링크를 강조하면, 순서를 바꿀 때마다 강조 대상이 바뀐다.
첫 화면의 로딩 속도도 위계의 일부다. 프로필 이미지가 LCP 요소가 되는 경우가 많으므로, LCP 기준에 맞춰 우선 로딩을 걸어야 한다. 이미지가 늦게 뜨면 사용자는 "누구 페이지인지" 판단을 못 한 채 몇 초를 보낸다.
5. 링크 자체의 디자인
의외로 자주 놓치는 부분이다.
[링크 항목에 들어가야 하는 것]
필수 레이블 (무엇인지)
권장 도착지 힌트 (어느 서비스인지 — 아이콘 또는 도메인)
선택 보조 설명 한 줄
✗ 나쁜 예: "여기를 클릭" "링크1" "https://youtu.be/dQw4w9..."
✓ 좋은 예: "신곡 뮤직비디오" YouTube
도착지를 알려주는 것이 클릭률과 신뢰도 양쪽에 영향을 준다. 어디로 가는지 모르는 링크는 눌리지 않고, 눌린 뒤 예상과 다르면 이탈한다.
링크 마크업은 ARIA link 패턴을 따르되, 실제 이동이라면 <a href>를 쓰는 것이 항상 낫다. <div onclick>으로 만들면 새 탭 열기, 링크 복사, 키보드 접근이 전부 깨진다.
[터치 타겟]
링크 버튼 높이는 최소 44px 권장 (WCAG 최소 기준은 24×24)
버튼 사이 간격 8px 이상 — 오탭 방지
간격이 없으면 스크롤하다 잘못 눌리는 일이 잦아진다. 기준은 최소 타겟 크기 문서에 규정돼 있다.
6. 자유 배치의 접근성 문제
자유 캔버스를 도입하면 반드시 따라오는 문제가 있다. DOM 순서와 시각 순서가 어긋난다.
생성 순서: 카드A(먼저 만듦) → 카드B → 카드C
시각 배치: 카드C(맨 위) / 카드A / 카드B
→ 스크린리더는 A, B, C 순으로 읽는다
→ 화면과 완전히 다른 순서
편집 화면에서는 어쩔 수 없지만, 공개 페이지에서는 좌표 기준으로 정렬한 DOM을 생성해야 한다.
[공개 페이지 렌더 규칙]
1. 요소를 (y, x) 순으로 정렬
2. 그 순서대로 DOM 출력
3. 시각 위치는 CSS로 배치 (order/transform)
4. 좁은 화면에서는 CSS 배치를 해제 → 자연스럽게 1열
이렇게 하면 읽기 순서와 모바일 대응이 동시에 해결된다. 4번이 2절에서 말한 "모바일 자동 재배치"의 구현이기도 하다.
[체크리스트]
□ 공개 페이지의 DOM 순서 = 좌표 순서
□ 키보드 Tab 순서가 시각 순서와 일치
□ 이미지 카드에 대체 텍스트 (편집 시 입력 유도)
□ 링크는 <a href> — div + onclick 금지
□ 색상만으로 구분되는 요소 없음
세 번째가 실무에서 가장 잘 빠진다. 사용자가 만드는 콘텐츠라 서비스가 강제할 수 없다고 생각하기 쉬운데, 이미지 업로드 시 대체 텍스트 입력을 기본 흐름에 넣으면 상당수가 채워진다. 나중에 물어보면 아무도 안 쓴다.
7. 어떻게 결정할 것인가
[선형 목록으로 충분한 경우]
· 사용자당 링크가 대체로 10개 이하
· 만드는 시간이 짧아야 함 (온보딩 이탈 민감)
· 결과물 품질의 하한이 중요 (공개 페이지가 브랜드에 영향)
[자유 캔버스가 필요한 경우]
· 주제별 큐레이션·아카이브 성격
· 이미지·영상 등 시각 요소 비중이 큼
· 만든 사람이 페이지 자체를 작품으로 여김
· 협업 편집이 있다면 더더욱 (공간이 곧 구조가 됨)
[둘 다 — 대부분의 답]
기본 선형, 승급 경로로 캔버스
단, 왕복이 무손실이어야 함
협업이 있으면 캔버스 쪽 가치가 크게 올라간다. 여러 명이 같이 편집할 때 "공간"이 자연스러운 분업 단위가 되기 때문이다. 선형 목록에서는 순서를 두고 충돌하지만, 캔버스에서는 각자 다른 영역을 채우면 된다.
8. 정리
1. 선형 목록은 링크 11개 근처에서 위계가 무너진다
2. 강조 슬롯(크기 차이)이 가장 저렴한 위계 도구
3. 자유 배치의 비용은 하위 20%의 망가진 페이지
4. 스냅·겹침 방지·모바일 정규화로 실패를 구조적으로 막는다
5. 기본은 선형, 승급 경로로 캔버스 — 왕복은 무손실로
6. 첫 화면은 정체성 + 핵심 행동 1개
7. 링크에는 도착지 힌트를 함께
8. 공개 페이지는 좌표 순으로 정렬된 DOM으로 출력
한 가지만 고른다면 8번이다. 자유 배치를 도입하면서 이걸 안 하면, 접근성과 모바일 대응이 동시에 무너지고 나중에 되돌리기가 가장 어렵다.