Frame에 네이밍하기

외국회사에서 UX UI 디자인을 합니다.

피그마(Figma)를 사용해 디지털 프로덕트 디자인을 하고 있습니다. 중간중간 레이어를 정리해주지 않고 작업에 몰두하다 보면 아래 사진처럼 무자비한 Frame 123456의 공격을 받게 됩니다. 

공격을 세게 받은 모습...ㅋ

화면을 구성하는 각 요소들과 그 요소를 담은 박스인 컨테이너를 어떻게 정리하고 이름 붙일 수 있을까요?

1. 네이밍 목적

네이밍이 필요한 이유는 단순합니다. 소통하기 위함이에요. 바로 옆에서 작업 당사자에게 하나하나 물어볼 수도 있겠지만 잘 정리해 둔 레이어가 있다면 추가적인 설명에 소모되는 시간과 노력을 아낄 수 있거든요. 또한 프로토타이핑을 할 때 어떤 특정 요소들을 연동해야 하는데 각 요소의 이름을 Frame 123456으로 기억한다면 헷갈리지 않겠어요?

2. 네이밍 제1 규칙

목적을 명확하게 이해하셨다면, 꼭 기억해야 할 제1 규칙은... 네이밍에 너무 많은 시간과 노력을 들이지 않아야 한다는 겁니다. 원활하고 효율적인 소통을 위해 네이밍을 하는 것인데 '멋진' 네이밍을 위해 고민이 깊어지면 도로아미타불...

혹시 더 나은 네이밍에 고민하신 적이 있나요? 그렇다면 잘 만들어진 레퍼런스를 참고해 보세요. 피그마 내에는 피그마 커뮤니티라고 불리는 피그마 유저들 간의 작업물 공유공간이 있어요. 평소 이곳에서 다양한 작업물을 보며 영감을 얻기도 하는데요. UI Kit라고 검색해 보시면 전 세계의 서로 다른 작업자들이 어떻게 요소에 네이밍을 붙이는지 아이디어를 얻을 수 있답니다. 

3. 기타 네이밍 규칙

(1) 카드, 버튼 등 요소의 이름을 영문으로 적어요. 한글로 적어도 아무 문제는 없지만 컴퓨터 언어가 영어에서 출발했기 때문에 영어 표현에 익숙해져 둬서 나쁠 건 없지요. 요소를 파일로 export 내보내어 개발팀에 전달할 때에도 파일명 그대로 유지할 수 있으니 편리하기도 하고요. 영문명 레퍼런스는 구글 Material Design System을 추천합니다.

(2) 상/하위 항목 구분, 요소의 컬러, 크기, 중복 구분 등은 '-' 대시를 사용해요. 

네이밍 예시