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

컴포넌트 라이브러리를 만드는 이유

효율적인 작업을 위해서는 컴포넌트 라이브러리를 구축하는 것이 중요합니다. 여러 프로젝트에서 동일한 컴포넌트를 재사용하는 경우, 라이브러리를 통해 컴포넌트를 중앙에서 관리하여 한 번에 컴포넌트를 업데이트하고 해당 컴포넌트가 사용되는 모든 곳에 변경 사항을 적용할 수 있습니다. 이를 통해 시간을 절약하고 규모에 관계없이 일관된 디자인을 유지할 수 있죠.

어떤 요소들을 컴포넌트로 만들 수 있나요?

Framer에서는 간단한 것부터 복잡한 것까지 거의 모든 UI 요소를 컴포넌트로 만들 수 있습니다.

• 버튼

• 바닥글

• 내비게이션

• 페이지 섹션

• 대화형 그래픽 및 요소

Note: 복잡한 구조라도 자주 쓰인다면 컴포넌트화하는 것이 효율적입니다.

컴포넌트를 라이브러리에 추가하는 방법

1. 좌측 패널에서 Assets 탭을 클릭

2. 저장할 컴포넌트 선택

3. 컴포넌트 이름 옆의 더보기 메뉴(⋯) 클릭Library > Add 선택

라이브러리에서 컴포넌트 가져오기

1. ⌘ + / (Mac) 또는 Ctrl + / (Windows)로 Quick Menu 열기

2. 사용 가능한 컴포넌트를 찾아보거나 검색

여러 프로젝트에서 컴포넌트 업데이트하기

라이브러리에 등록된 컴포넌트를 수정하면, 해당 컴포넌트를 사용하는 모든 프로젝트에서 Update 버튼이 활성화됩니다.

1. Assets 탭에서 업데이트할 컴포넌트 찾기

2. Update 버튼을 클릭

업데이트 버튼만 클릭해도 수작업 없이 모든 컴포넌트를 일괄 업데이트할 수 있습니다.

컴포넌트 관리 팁

1. 이름 규칙 설정하기

• 폴더에는 슬래시를 사용하세요.
  예를 들어, 메뉴 컴포넌트의 이름을 지정하면 Navigation/Menu컴포넌트는 "내비게이션"이라는 폴더 아래에 그룹화됩니다.

• 상태, 테마, 베리언트를 포함하도록 구성 요소의 이름을 구조적으로 지정하세요.
  예시: Buttons/Navigation/PrimaryButton

2. 컴포넌트 중앙화하기

• 모든 컴포넌트를 단일 프로젝트에 보관하여 쉽게 업데이트하고 재사용할 수 있습니다.

3. 브레이크포인트별로 Variants 만들기

• 컴포넌트 베리언트 이름에 Desktop, Tablet, Phone을 포함해 보세요. Framer가 자동으로 디바이스에 맞는 베리언트를 선택해줍니다.

4. Constraints 설정하기

• 최소/최대 너비와 높이를 명확하게 설정하세요. 화면 크기가 조정될 때 컴포넌트 사이즈가 의도한 대로 변형됩니다.

본 글은 Framer 공식 블로그의 ‘Best practices for setting up a component library’를 번역·각색한 콘텐츠입니다.