본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

아코디언 컴포넌트는 자주 묻는 질문(FAQ)이나 단계별 안내 페이지에서 자주 쓰입니다. 해당 가이드를 통해, 아코디언 컴포넌트의 답변 필드 내부에 링크를 추가하여 프로젝트에 활용해보시길 바랍니다.

아코디언 컴포넌트 업데이트하기

1. 기존의 Answer 필드 제거하기

아코디언 컴포넌트에 링크를 추가하기 전, 먼저 기존의 Answer 변수를 삭제해야 합니다.

• 아코디언 컴포넌트 안에서 Variables를 클릭하기

• Answer 필드를 마우스 오른쪽 버튼으로 클릭하고 Remove를 선택하기

Note: Remove 옵션은 드롭다운 메뉴 안에 있습니다.

2. Formatted Text 필드 추가하기

이제 링크를 포함할 수 있는 Formatted Text 필드를 새로 추가할 차례입니다.

• 삭제한 필드 자리에 Formatted Text를 추가하고, 이름을 ‘Answer’로 지정하기

3. Answer 변수를 다시 설정하기

이제 새로 만든 Formatted Text를 실제 ‘Answer’ 변수에 연결합니다.

• 왼쪽 패널에서 Answer 레이어를 선택하기

• 오른쪽 패널의 Content 옆에 있는 + 아이콘을 클릭하기

• Set Variable에서 ‘Answer’를 선택하기

아코디언 컴포넌트 편집하기

4. 아코디언에서 링크 추가하기

이제 컴포넌트가 새 필드와 변수로 연결되어, 답변 내용 안에서 링크 삽입이 가능해집니다.

• 오른쪽 패널에서 ‘Answer’을 클릭하여, Formatted Text 편집기 열기

• 여기에서 링크를 추가하거나, 텍스트에 다양한 서식을 적용하여 마음껏 활용하기

위의 단계를 따라 했지만, 링크가 표시되지 않거나 편집이 되지 않는다면 Framer의 Contact 페이지를 통해 지원팀에 문의하실 수 있습니다.

본 글은 Framer 공식 블로그의 ‘How to add links inside the accordion component’을 번역·각색한 콘텐츠입니다.