컴포넌트(component), 인스턴스(instance)

1. 정의

• 컴포넌트
  • 사용자와 상호작용하는 기본적인 형태로 어느 공간에서도 기능을 수행할 수 있는 최소한의 단위
  • Figma에서는 작은 다이아몬드 4개로 표현되어 있음(아래 이미지 참고)
  • 

• 인스턴스
  • 컴포넌트를 복제한 오브젝트
  • 컴포넌트를 수정하면 일괄 수정
  • 개별 수정할 수 있으며 컴포넌트로 덮어씌울 수 있음
  • Figma에서는 빈 다이아몬드 1개로 표현되어 있음(아래 이미지 참고)
  • 

 

2. 컴포넌트와 인스턴스의 관계

• 부모와 자식 관계라고 보는 게 이해하기 쉬움
• 도형 또는 텍스트를 생성 → 컴포넌트(부모)를 생성 → 컴포넌트를 복제하여 인스턴스(자식)를 생성하여 사용
• 컴포넌트가 변경되면 관련된 인스턴스는 모두 동일하게 변경됨(하단 동영상 참고)

• 생성된 인스턴스의 상태를 변경(텍스트 변경, 크기 변경 등)하였다면 변경된 사항을 제외한 컴포넌트와 동일한 상태의 값만 수정됨(아래 이미지 참고)
  • '컴포넌트'의 텍스트 수정 시, '인스턴스'의 텍스트 동시 변경, '인스턴스(텍스트 변경)'은 수정되지 않음
  • '컴포넌트'의 도형에 라운드 10 적용 시, '인스턴스'와 '인스턴스(텍스트 변경)' 모두 수정됨

 

3. 컴포넌트와 인스턴스가 화면설계서 작성 시 도움이 되는 이유

• 화면설계서 작성 시 화면마다 동일한 문구 및 기능이 사용됨
• 화면설계서 수정이 필요한 경우 각 페이지마다 수정하는 것이 아니라 컴포넌트 1개를 수정함으로써 컴포넌트의 인스턴스들도 동일하게 변경됨(반복 작업을 줄여줌)
• 작자는 power point로 화면설계서 작성하였는데, 1개의 문구를 수정하려면 전체 페이지를 확인해서 수정해야 하는 번거로움이 존재하였음. 피그마를 사용하고나서 번거로움이 해소되었고, 화면설계서 작성 및 수정하는 시간이 많이 줄었음

 

4. 화면설계서 작성 시 컴포넌트 활용 방법 및 꿀팁

1. 당신이 화면설계서를 작성할 때 자주 사용하는 title 또는 기능을 고민하여 몇 가지 미리 제작하기
   • 단편적으로 말하는 것이 아니라, 지금까지 화면을 그릴 때 자주 사용하는 기능이 있으니, 생각나는 대로 하나씩 만들어두면 화면설계서 제작 시간을 단축할 수 있음
   • 작자의 경우는 화면설계서 시간을 단축하고 기획을 고민할 수 있는 시간을 더 많이 확보하려고 노력하는 편임
   • 또한 나만의 컴포넌트를 만들어두면 library 기능(추후 다룰 예정)으로 여러 프로젝트에서 다용도로 활용 가능함
   • e.g. 드롭다운리스트, 버튼, 입력필드
2. 프로젝트의 화면설계서 작성 시 title, cancel 버튼, confirm 버튼 등 자주 사용하는 문구/기능을 컴포넌트화하기
   • 큰 프로젝트를 진행할 경우 컴포넌트를 별도의 page로 제작하여 사용(아래 이미지 참고)
   • 번거롭더라도 컴포넌트에 title 지정할 것. 검색 및 활용에 용이함

• 수정하고자 하는 컴포넌트를 확인하기 어렵다면 인스턴스를 선택하고 우측 작은 다이아몬드 4개 아이콘을 선택하면 컴포넌트로 이동함

• 단축키 암기(Window 기준)
  • 컴포넌트 생성: ctrl+alt+K