※이 글의 순서와 화면은 2021년 시점의 것입니다. Webflow의 현행 UI에서는 명칭과 배치가 달라졌을 수 있습니다.
안녕하세요. 마사토입니다.
최근 블로그 글을 써 나가는 사이에 “목차에서 보고 싶은 곳으로 바로 이동할 수 있으면 좋겠다”는 생각이 들었습니다. 에디슨급 발상입니다. 그래서 이번에는 Webflow의 CMS를 사용해 링크 달린 목차를 만들어 보려고 합니다.
그런데 이게 웬일일까요… Webflow의 CMS 리치 텍스트 안에서는 페이지 내 링크를 만들 수 없지 않겠습니까.아니 애초에 리치 텍스트 안에서는 ID를 붙일 수 없더군요…. 그래서 이번에는 CMS로 만든 블로그 글에 어떻게든 CMS를 활용해, 작업량을 최대한 줄인 “페이지 내 링크 달린 목차를 만드는 방법”을 소개해 드리려고 합니다.
이번에 하는 방법을 대략 설명하면 LIST와 링크를 CMS 밖에서 만들고 나머지를 CMS로 만드는 방법입니다. CMS 안의 리치 텍스트를 분할하고 ID를 붙여 링크로 이동시킵니다. 페이지마다 편집하지 않고 CMS 안의 작업만으로 목차를 만들 수 있도록 만들어 봅시다.
그래도 잘 모르겠다고 생각하실 테니 일단 만들어 봅시다.
↓이 목차를 만드는 방법을 해설합니다.
이 글의 요점
- 목차란?
- 목차란 블로그 글 등에서 보고 싶은 곳으로 바로 이동할 수 있도록 각 섹션으로의 페이지 내 링크를 정리한 것입니다. Webflow에서는 CMS 리치 텍스트를 분할해 ID를 붙이면 커스텀 코드 없이 만들 수 있습니다.
목차
Webflow 목차 만들기: 먼저 토대 만들기부터
웹사이트는 기본적으로 몇 가지 만드는 방법이 있습니다.
이번에는 다음 점을 의식해 만들어 보려고 합니다.
- 추가로 커스텀 코드를 쓰지 않는다
- Webflow 안의 기능만으로 완결한다
- 가능한 한 작업 공정을 적게 한다
리스트를 추가해 제작 시작
먼저 토대 부분부터 만들어 갑시다.
- 내비게이터를 참고해 요소를 조립합니다.
리스트 아이템은 하나 만들었으면 이미지처럼 복사해 5개로 늘려 둡시다.
※목차를 만들고 싶은 만큼 늘려도 OK. 나중에 각각 사용하게 됩니다.
Webflow 목차 만들기: CMS에서 섹션별로 분할
여러분이 사용하는 블로그의 CMS가 어떤 것인지에 따라 만드는 방법을 조금 바꾸는 편이 좋을 것 같습니다만, 일단 “잘 모르겠다”는 분은 따라 만들어 보세요.
여기서 중요한 것은 이 2가지 항목↓
- Table of contents 한국어로 말하면 “목차”입니다. 웹에서 만드는 코드는 기본적으로 영어이므로 여기서도 영어를 채용합니다. 목차에 표시하고 싶은 문장을 입력하는 필드입니다.
- Section1〜5 목차에서 이동시키기 위해 각 섹션에 ID를 붙입니다. 그것을 위한 항목입니다. 이미 블로그를 쓰고 있는 분은 섹션별로 분해해 봅시다.
텍스트에 ID 붙이기
CMS에서 리치 텍스트를 늘린 만큼 요소도 늘려 나갈 필요가 있습니다. 왜 분할해서 늘리는가, 그것은 바로 ID를 붙이기 위해서입니다. 늘린 리치 텍스트에 ID를 붙입시다.
ID 붙이는 법
“ID 붙이는 법을 모르겠다”는 분이 계실지도 모르니 살짝 소개해 두겠습니다. (저도 처음에는 찾아 헤맸습니다)
ID는 오른쪽 위의 톱니바퀴를 선택하면 맨 위에 나옵니다. 각 섹션에 CMS 필드와 같은 이름을 붙입시다. (Table of contents 1〜5)
참고로 목차가 맨 위에 오면 제 취향에는 별로라서, H1과 리드문을 넣을 제목용 필드를 만들었습니다. 리치 텍스트는 합계 6개입니다. 섹션 수를 더 원하는 분은 같은 방법으로 늘립시다. 섹션을 많이 만들어도 디자인에는 아무 문제가 없습니다. (무거워질 수도 있다는 점은 있지만 아마 괜찮습니다) 자신의 블로그에 맞는 수를 설정합시다!
남은 것은 각 설정을 만지기만
- 목차 텍스트에 CMS를 반영 Table of contents를 순서대로 설정
- 링크가 페이지 내 ID로 이동하도록 설정 각 Section을 설정합니다
- 각 리치 텍스트에 CMS를 설정
이것으로 페이지 내의 섹션으로 이동할 수 있는 목차를 만들 수 있었을 것입니다. 그런데 여기서 문제가 하나.
“List” 자체는 CMS로 만들지 않았으므로
“섹션이 3개밖에 없다!”는 경우 빈 목차가 생겨 버립니다.
이 에러를 해소하는 설정이
“컨디셔널 비지빌리티(Conditional Visibility)”
한글로 표기하니 뭔가 대단해 보이네요.
요컨대 아래의 것입니다
여기서 설정할 수 있는 기능은 “어떤 때 이 요소를 표시할 것인가”입니다. 위 사진의 설정에서는 “Table of contents 1에 입력이 있을 때 표시한다”고 설정하고 있습니다.
이 설정을 위에서부터 순서대로 1〜5까지 숫자를 맞춰 설정합시다. (예: List 2에는 Table of contents 2 is set으로 설정)
그 설정을 하면 입력이 없는 리스트는 표시되지 않아, 섹션이 3개일 때는 목차도 3개만 표시되는 설정이 가능합니다.
덤으로
목차 전체를 감싸는 DIV 블록에도 같은 설정을 하면 목차가 없는 페이지를 만들 때도 도움이 됩니다. 그 경우 Table of contents에 아무것도 입력하지 않으면 되는 것이니 간단하지요.
이후에는 목차의 배경을 바꾸거나 글자색과 밑줄을 지우는 등, 원하는 대로 CSS 기능을 사용해 스타일을 바꾸면 완성입니다.
문장 중간에 같은 페이지 내로 이동하는 링크를 만들 수 있나요?
위의 방법으로 CMS를 분할하면 가능합니다. 다만 문장의 CMS 리치 텍스트를 분할해야 하므로 상당히 번거롭습니다. 현재로서는 “간단히 설정할 수 있는 방법은 없다”고 생각합니다. (있다면 알려 주세요)
그렇다고는 해도 커스텀 코드를 쓰면 간단히 될 것 같긴 합니다(웃음). 언젠가 커스텀 코드에 관한 글을 쓸 테니 기다려 주세요. 우선은 모처럼의 노코드를 최대한 살리는 방법을 찾아보고 싶습니다.
정리
이번에 한 작업을 복습해 봅시다.
- 리스트를 삽입해 토대 만들기
- CMS에 리스트 타이틀을 넣을 필드 작성
- CMS 콘텐츠를 섹션별로 분할
- 코드 화면에서 리치 텍스트를 삽입해 ID 붙이기
- 리스트에 CMS 기능의 링크와 텍스트를 반영
- 리스트에 입력이 있을 때만 표시하도록 설정
- 리스트의 스타일 변경
아직 글이 많지 않다는 분이나 이제부터 블로그를 시작한다는 분은 이 설정을 해 두는 것도 하나의 방법이라고 생각합니다. 커스텀 코드를 쓰고 싶은 분은 조금만 기다려 주세요. 커스텀 코드를 쓰면 “인터넷에 공개하지 않으면 효과를 볼 수 없다” “난도가 조금 올라간다” 등이 있으므로 지금은 노코드를 전력으로 써 나가고자 합니다.
다음 회에는 “CMS 리치 텍스트에서 글자색을 바꾸기·글자에 색이 있는 밑줄 긋기”를 전해 드립니다. 링크 만들기보다 압도적으로 간단한 초강수 방법입니다. 제 생각에는 “이걸로도 괜찮잖아!” 싶습니다. (SEO 같은 데 영향이 있을지도 모르지만요.)
다 같이 힘냅시다. 지치면 쉽시다. 열심히 한 것을 알려 주시면 기쁘겠습니다. 저도 힘내겠습니다. 그럼 또 만나요.
※완성도는 이 블로그의 목차입니다.
제작 실적
자주 묻는 질문
Webflow의 CMS 리치 텍스트 안에 페이지 내 링크를 만들 수 있나요?
리치 텍스트 안에서는 ID를 붙일 수 없으므로 그대로는 페이지 내 링크를 만들 수 없습니다. 리치 텍스트를 섹션별로 분할해 ID를 붙이면 CMS를 사용한 목차에서 링크로 이동시킬 수 있게 됩니다.
커스텀 코드 없이 Webflow에 목차를 만들 수 있나요?
만들 수 있습니다. 리스트와 링크를 CMS 밖에서 만들고, CMS에 목차 텍스트용 Table of contents와 ID용 Section 필드를 준비해, 분할한 리치 텍스트에 CMS 필드와 같은 이름의 ID를 붙여 반영하는 방법입니다.
섹션이 적은 페이지에서 빈 목차가 생겨 버리는 경우에는 어떻게 하면 되나요?
Conditional Visibility로 “입력이 있을 때만 표시한다” 설정을 각 리스트 아이템에 합니다. 목차 전체를 감싸는 DIV 블록에도 같은 설정을 하면 목차가 없는 페이지를 만들 때도 도움이 됩니다.
문장 중간에 같은 페이지 내로 이동하는 링크는 만들 수 있나요?
CMS 리치 텍스트를 분할하면 가능하지만 상당히 손이 많이 갑니다. 현재로서는 간단히 설정할 수 있는 방법이 없고, 커스텀 코드를 쓰면 간단히 될 것으로 보입니다.
Webflow의 목차 만들기에서 의식할 포인트는 무엇인가요?
추가로 커스텀 코드를 쓰지 않는다, Webflow 안의 기능만으로 완결한다, 가능한 한 작업 공정을 적게 한다의 3가지입니다. 리스트 아이템은 목차를 만들고 싶은 수만큼 복사해 늘려 둡니다.
