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

아이콘이란?

아이콘(Icon)은 의미를 시각적으로 표현한 작은 그래픽 심볼입니다.
주로 버튼, 메뉴, 정보 표시 등에서 사용되며, 텍스트 없이도 사용자에게 기능이나 내용을 직관적으로 전달해주기 때문에 UI 단순화와 사용성 측면에서 긍정적인 영향을 줄 수 있습니다.

기본 아이콘 세트 추가하기

Framer는 Phosphor, Feather, Hero, Iconoir, Twemoji 등의 벡터 아이콘 세트를 기본적으로 지원합니다.

1. [+]Insert → Icons 항목을 선택

2. 원하는 아이콘을 캔버스로 드래그(클릭)

3. 오른쪽 속성 패널에서 Icon 클릭

4. 열린 아이콘 패널에서 원하는 아이콘을 클릭 후 가공

플러그인으로 아이콘 추가하기

Framer Marketplace에 있는 아이콘 관련 플러그인(Phosphor, Bootstrap Icons, Logofy 등)을 설치하여 아이콘의 종류를 추가할 수 있습니다.

1. 마켓플레이스 클릭

2. 상단 메뉴의 Plugins 버튼 클릭

3. 원하는 아이콘 세트 검색

4. Open Plugin 버튼 클릭

5. 아이콘 플러그인을 추가해야 하는 페이지 선택

6. 아이콘 패널에서 원하는 아이콘을 클릭 후 가공

Note : 페이지 하단 플로팅바에서 Plugins 선택 후 원하는 아이콘 플러그인을 검색하고 실행하면 페이지에서 바로 아이콘 패널을 열 수 있습니다.(플러그인의 상세 내용은 확인할 수 없음)

SVG 아이콘 파일 직접 불러오기

SVG 파일을 캔버스로 직접 드래그 앤 드롭 또는 SVG 파일을 (macOS: ⌘+C,⌘+V Windows: Ctrl+C,Ctrl+V ) 붙여넣으면 Framer에서 원하는 SVG 파일을 아이콘으로 적용하는 것도 가능합니다.
Note : 로고나 사용자 정의 아이콘을 직접 삽입하고 사용할 때 편리한 방법입니다.

본 글은 Framer 공식 블로그의 ‘How to add icons’ 를 번역·각색한 콘텐츠입니다.