인프런 커뮤니티 질문&답변
작성한 질문수
타이포그래피 네이밍 관련해서 궁금한게 있습니다.
해결된 질문
작성
·
78
·
수정됨
0
🔍 상황
현재 타이포그래피 스타일 명명 방식에 대해 고민이 있습니다.
개발자 측에서는
Display1-Bold 와 같이 위계 중심의 토큰 네이밍을 선호합니다.
코드 연동 시에는 스타일명이 그대로 토큰으로 등록되기 때문에
40px 같은 구체적인 수치를 굳이 명칭에 포함할 필요가 없고,
오히려 수치가 변경될 경우 네이밍까지 수정해야 하는 유지보수 이슈가 발생합니다.
디자이너 측에서는
Figma 내에서 스타일을 빠르게 식별하고 사용하기 위해
Display1-Bold-40px처럼 사이즈가 명시된 스타일 네이밍을 선호합니다.
수치가 함께 있어야 작업 중 빠르게 위계를 파악하고 적용하기 수월하다는 의견이 있습니다.
🙋🏻 질문
이러한 상황에서 다음과 같은 고민이 있습니다:
디자이너가 스타일 명에서 수치를 보고 싶은 니즈와
개발자는 위계 중심의 명칭을 유지하고 싶은 니즈를
동시에 충족시킬 수 있는 구조가 있을까요?
예를 들어 Figma 내에서 디자이너는 Display1-Bold-40px처럼 수치를 보고 작업하되,
코드로 내보낼 때는 Display1-Bold로만 연동되는 방식이 가능한지,
혹은 실제 조직에서는 이런 상황을 어떻게 운영하고 있는지 궁금합니다.
답변 2
1
희주님 안녕하세요,
협업 시 흔히 발생하는 네이밍 이슈인 것 같습니다. 딱히 무엇이 정답이라고 단정 짓긴 어렵지만, 개인적으로는 개발자 네이밍 방식을 따르는 편이 더 좋다고 생각합니다.
그 이유는, 현재 피그마에서 스타일을 선택할 때 오른쪽 패널에 이미 폰트 크기와 줄간격 값이 노출되기 때문에, 그 값을 굳이 스타일 이름에 넣을 필요성은 낮다고 생각합니다.
또 다른 방법으로는, 제가 실제로 회사에서 사용하는 방식인데요, Display 1, Display 2 같은 추상적인 네이밍 대신에 Display Hero, Display Page처럼 시맨틱하게 목적을 드러내는 방식입니다. 이렇게 하면 스타일의 용도를 빠르게 파악할 수 있어 협업 시 훨씬 효율적입니다.
그리고 개인적인 의견으로는, 불필요하게 네이밍이 길어지는 것보다 간결한 것이 바람직하다고 생각합니다.
참고로, 현재 피그마에서는 스타일을 내보낼 때 자동으로 다른 네이밍 컨벤션으로 변환해주는 기능은 따로 없습니다.
감사합니다.
볼드 드림.
제일 이상적인 방식은 말씀하신대로 디자이너가 보는 스타일과 개발 측에서 사용하는 스타일이 분리되는 것입니다. 예를 들어, 디자인 시스템에서는 토큰처럼 추상화된 값을 디자이너가 보고, 개발 쪽에서는 이를 바탕으로 실제 코드에 적용되는 형태로 나누는 방식이죠.
아마 조만간 ‘복합 토큰(composite tokens)’이라는 개념이 등장하지 않을까 싶습니다.
디자인 토큰을 텍스트 스타일, 간격 값으로 나누는 것을 넘어, 의미 단위(예: “Display Page”)로 묶는 방식입니다.
그 이전에는 일반적으로 두 가지 방식을 사용해 왔습니다:
첫번째: 그룹핑하여 그대로 두는 방식:
디자이너와 개발자가 동일한 구조로 텍스트 스타일을 사용하도록 정의해두고, 이를 서로 공유하는 방법입니다.
또한 최근에는 CSS 뿐만 아니라 컴포넌트 기반으로 텍스트 스타일을 구현하는 경우가 많습니다. 이 때는 에디터(IDE)의 자동완성 기능이 잘 되어 있어서 body만 입력해도 관련 스타일이나 컴포넌트가 추천되거나 자동 생성됩니다.
그래서 반드시 디자인 명칭과 1:1로 완벽하게 매칭시켜야 한다는 부담을 가질 필요는 없습니다.
두번째: 개발자 관점에서 네이밍 컨벤션에 맞춰 나열하는 방식
이 경우에는 스타일을 Body-01-Bold, Caption-02-Regular처럼 네이밍만으로 구분합니다.
다만 이렇게 할 경우, 텍스트 스타일의 수는 의도적으로 줄이는 것이 좋습니다.
너무 많은 스타일이 존재하면 디자이너 입장에서 선택과 관리가 어려워지기 때문입니다.
저의 답변이 모든 것을 해결할 수는 없어도 디자이너, 개발자분들과 협업하시는데, 조금이라도 도움이 되셨으면 좋겠습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 희주님께서 타이포그래피 스타일 명명 방식에 대해 궁금해하시는 점에 대해 말씀드리겠습니다.
질문하신 내용은 디자이너와 개발자 간의 협업에서 자주 발생하는 명명 규칙에 대한 문제입니다. 이를 해결하기 위해 몇 가지 접근 방법을 고려할 수 있습니다:
스타일 명명과 토큰 관리의 분리:
디자이너용 내부 명명: Figma에서 작업할 때는
Display1-Bold-40px처럼 명칭에 사이즈 정보를 포함하여 디자이너가 빠르게 스타일을 파악할 수 있게 합니다.개발자용 명명: 코드로 내보낼 때는
Display1-Bold처럼 위계 중심의 이름을 사용합니다. 이를 지원하기 위해서는 디자인 시스템 내에서 두 명명 체계를 매핑하거나 변환할 수 있는 도구나 스크립트를 활용해야 합니다.
디자인 툴과 개발 환경의 툴체인을 활용:
Figma와 같은 디자인 툴에서 스타일을 유지하면서, 디자인 시스템 툴이나 토큰 매니저를 연동하여 스타일 명칭을 개발 목적에 맞게 변환할 수 있습니다.
예를 들어, Figma에서 스타일을 작성하고, 이를 JSON 포맷으로 내보내어 다른 서비스(예: Storybook, 토큰 매니저 등)에서 스타일 명칭을 자동 변환 및 관리할 수 있습니다.
명명 규칙에 대한 팀 내 표준화 합의:
- 모든 팀원이 참여하는 워크숍이나 미팅을 통해, 명명 규칙을 함께 정의하고, 디자이너와 개발자 모두가 이해하고 수용할 수 있는 절충안을 마련하는 것도 좋은 방법입니다.
- 모든 팀원이 참여하는 워크숍이나 미팅을 통해, 명명 규칙을 함께 정의하고, 디자이너와 개발자 모두가 이해하고 수용할 수 있는 절충안을 마련하는 것도 좋은 방법입니다.
기존 게시물 참조:
- “타이포그래피 스타일 네임에 관하여”라는 기존 게시물 링크에서는 유사한 질문과 그에 대한 논의가 이루어졌습니다. 이 게시물에서는 타이포 그래피 스타일을 정의할 때의 명명법과 그 이유에 대해 다루고 있습니다.
- “타이포그래피 스타일 네임에 관하여”라는 기존 게시물 링크에서는 유사한 질문과 그에 대한 논의가 이루어졌습니다. 이 게시물에서는 타이포 그래피 스타일을 정의할 때의 명명법과 그 이유에 대해 다루고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
네 답변 감사합니다!
피그마 내 에서 스타일 지정할때 그룹핑을 지어서 묶어두게 되면 그룹핑 단위대로
Body/01/blod 이런식으로 네이밍이 생성이 되더라구요
사실상 개발쪽에서 사용하는 코드는 (/) 가 아닌 (-) 를 사용하는데 말이죠 ㅜㅜ 혹시 이럴 경우는 대응을 어떻게하는지 궁금합니다
: 그렇다고 그룹핑을 지어놓지 않으면 디자이너가 사용하기 너무 불편하기도하고 정리가 되지 않아서ㅜㅜ 고민이 됩니다.