Figma가 담지 못한 설계 의도를 명명 규칙으로 연결하기
1. 아이콘은 컴포넌트와 다른 콘텐츠
Figma에서 같은 컴포넌트 자산으로 보여도, 아이콘 그림과 UI 컴포넌트는 다르게 처리해야 합니다.
- `DE Icon asset / heart`처럼 아이콘 전용 접두어를 붙입니다.
- 자동화 도구가 일반 컴포넌트와 구분해 SVG를 추출하고, 코드에서 참조할 아이콘 목록을 만들 수 있습니다.
2. 이름에 하위 컴포넌트의 소속 담기
명명 규칙은 어떤 부품이 어느 컴포넌트에 속하는지 전달합니다.
- `Action list / Item`처럼 부모와 하위 컴포넌트를 연결합니다.
- 명세와 생성 코드에도 이 관계를 반영하고, 예제 자산은 제외 규칙으로 구분합니다.
- 이름만으로 다른 곳에서의 사용까지 막을 수는 없습니다.
- 관계를 표현하는 규칙과 잘못된 구성을 검사하는 도구가 함께 필요합니다.
3. 이미지 전달 방식도 명시하기
이미지를 Fill로 넣는 방식과 코드의 이미지 소스 속성 사이에 공통 규칙을 둡니다.
- 전용 이미지 컴포넌트와 `source` 또는 `imageSource` 같은 속성 이름을 정합니다.
- 자동화 도구가 이를 해석해 이미지를 추출하고 문서·스토리·테스트에서 참조하게 합니다.
4. 규칙을 모으고, 조용한 누락 검증하기
이름에 의존하는 구조는 화면이 멀쩡해도 이름 변경만으로 연결이 끊길 수 있습니다.
- 작성 규칙을 한 설정 파일에 모으고 린터 등으로 누락을 검사합니다.
- 아이콘이 추출 대상에서 빠지거나 하위 컴포넌트의 소속이 사라지는 문제를 확인합니다.
- 원문의 슬롯 제약 사례처럼 기본 기능이 지원되면 기존 규칙을 대체할 수 있습니다.
