사물에 이름을 붙이는 실용적인 가이드

이름 짓기는 어렵습니다. 우리가 사용하는 언어는 사물을 생각하는 방식을 형성할 뿐만 아니라, 그 사물에 대해 나누는 대화까지도 영향을 미칩니다. 이것이 바로 색상, 아이콘, UI 컴포넌트, 기능 등에 대해 많은 혼란을 느끼게 하는 이유이며, 디자인 토큰(design tokens), HTML 클래스, 변수 등의 이름을 짓는 데 어려움을 겪는 이유이기도 합니다.

때로는 우리가 선택하는 이름이 너무 일반적이라서 정확히 무엇을 의미하는지 이해하기 어렵습니다. 반대로 너무 구체적인 경우도 있어 유연성과 재사용에 여지를 남기지 못합니다. 어떻게 올바른 이름을 선택할 수 있을까요? 그리고 어떤 명명 규칙(naming conventions)이 가장 효과적일까요? 자세히 살펴보겠습니다.

사물 이름 짓는 방법

HTML 클래스, CSS 속성 또는 JavaScript 함수에 대한 아이디어가 필요하다면, Classnames은 창의적인 사고를 하게 만드는 아이디어들로 가득 찬 멋진 자료입니다.

이 사이트는 이름 짓기에 완벽한 주제별 그룹 목록을 제공합니다. 다양한 종류의 행동, 사물 간의 유사성, 순서, 그룹화, 연관성을 설명하는 용어들을 찾을 수 있을 뿐만 아니라, 코드와 관련하여 즉각적으로 떠오르지 않을 만한 테마별 단어 모음도 있습니다. 그중에는 자연, 예술, 연극, 음악, 건축, 패션, 출판 등의 분야에서 온 단어들도 포함되어 있습니다.

색상 이름 짓는 방법

특정 색상에 맞는 이름을 어떻게 고를 수 있을까요? 다행히 David Aerne이 다양한 참고 자료와 수많은 사용자 기여를 통해 현재 30,355개의 고유한 색상 이름을 보유한 색상 이름 저장소를 유지하고 있습니다.

물론 이 저장소에는 색상 선택기 및 이름 검색 기능과 충분한 다른 색상 선택기도 함께 제공됩니다. 정말 대단한 작업이며, 항상 옆에 두고 참고할 수 있는 훌륭한 자료입니다.

레이어 및 그룹 이름 짓는 방법

좋은 이름이란 무엇일까요? Javier Cuello는 **레이어(layers), 그룹(groups), 컴포넌트(components)**의 이름을 일관성 있고 확장 가능한 방식으로 지정하는 데 도움이 되는 명명 모범 사례 세트를 요약했습니다.

Javier가 지적하듯이, 좋은 이름은 논리적인 구조를 가지고 짧고 의미 있으며 모두가 알고 있고 시각적 속성과 관련이 없어야 합니다. 그는 이를 달성하는 방법을 보여주기 위해 **해야 할 것(do’s)과 하지 말아야 할 것(don’ts)**을 공유하고, 또한 사이즈, 색상, 그룹, 레이어, 컴포넌트의 이름을 지정할 때 고려해야 하는 모든 세부 사항들을 자세히 살펴봅니다.

디자인 토큰 명명 방법

다양한 제품 전반에 걸쳐 작동하는 유연한 디자인 토큰 분류 체계를 구축하려면 어떻게 해야 할까요? 이것이 Intuit 팀이 직면했던 과제였습니다. Mailchimp, QuickBooks, TurboTax, Mint와 같은 제품의 모회사인 이 회사는 브랜드 테마를 넘어 광범위한 제품을 위한 기반 시스템 역할을 하는 유연한 토큰 시스템을 개발했습니다.

Nate Baldwin은 케이스 스터디를 작성하여 Intuit의 디자인 토큰 분류 체계 구축에 대한 귀중한 통찰력을 공유했습니다. 이 글은 이전 분류 체계 시스템의 문제점, 새로운 시스템을 위해 정의된 기준, 그리고 그것이 어떻게 만들어졌는지 깊이 파고듭니다. 자신만의 견고하고 유연한 토큰 분류 체계를 구축하는 데 도움이 되는 많은 시사점을 얻을 수 있을 것입니다.

UI 컴포넌트의 일반적인 이름들

다른 사람들이 비슷한 것들을 무엇이라고 부르는지 살펴보는 것은 명명에 어려움을 겪고 있을 때 시작하기 좋은 방법입니다. 그리고 다른 디자인 시스템보다 더 나은 출처가 있을까요? Iain Bean이 여러분을 디자인 시스템의 미로 속으로 빠지기 전에 조사를 완료하고 컴포넌트 갤러리를 만들었습니다.

이 컬렉션은 아코디언(accordion)부터 시각적으로 숨겨진 컴포넌트까지 50가지가 넘는 UI 컴포넌트에 대한 풍부한 예시를 포함하고 있으며, 해당 UI 컴포넌트들이 사용되는 다른 이름들도 나열합니다. 명명법에 관해서만 좋은 자료가 아니라 전반적으로 환상적인 리소스입니다.

보너스: Name That UI, 일반적인 UI 컴포넌트에 대한 시각적 사전을 참고하세요.

새로운 기능 명명하기

기능들은 종종 **발견 가능성(discoverability)**이 낮아서 채택률이 떨어집니다. 기능의 채택에는 시간이 필요합니다. 먼저 그 기능을 발견하고, 이해한 다음, 시도해 보고, 학습하며, 궁극적으로 기존 워크플로우에 통합되어야 합니다. Erin Gannon은 이 모든 과정이 이루어지도록 돕는 유용한 실용 가이드를 작성했습니다.

좋은 이름은 사용자 니즈와 문제에서 비롯됩니다. 좋은 이름은 기능의 가치나 결과(수행해야 할 업무, job-to-be-done)를 알려주어야 하며 — 가장 중요하게는! — 사용자가 사용하는 언어 자체에 초점을 맞춰야 합니다. 그러므로 사람들에게 그 기능을 자신의 말로 설명해 달라고 요청한 다음, 그들이 사용하는 단어를 활용하세요.

변수 명명하기 (분류 체계 맵)

복잡하고 여러 브랜드 및 테마를 가진 디자인 시스템을 위한 명명 지침의 훌륭한 예시는 Vodafone UK Design System 팀에서 나왔습니다. 이들의 Variables Taxonomy Map은 디자인 토큰의 해부학 및 분류를 잘 구성된 컬렉션 시스템으로 세분화합니다.

이 맵은 시스템을 지원하는 데 필요한 네 가지 컬렉션과 토큰 간의 연결(브랜드와 기본 요소부터 의미론적 표현, 페이지까지)을 보여줍니다. 이는 Nathan Curtis가 디자인 토큰 명명에 대해 작업한 내용을 기반으로 하며, 오직 이름만으로도 어떤 토큰이 어디에 사용되고 무엇을 나타내는지 통찰력을 얻을 수 있게 합니다.

디자인 토큰 명명 가이드 및 인벤토리

Romina Kavcic이 디자인 토큰(design tokens)을 명명하는 데 도움이 되는 작은 도구(https://www.namedesigntokens.guide)를 만들었습니다. 이 도구를 통해 디자인 토큰의 작동 방식과 효과적인 명명 방법 학습은 물론, 컴포넌트(components), 카테고리(categories), 상태(states), 역할(roles)을 포함하여 자체 명명 구조를 구성할 수 있습니다.

보너스: 디자인 토큰 이름 인벤토리 스프레드시트는 네 가지 레벨로 구성된 간단한 구조를 통해 모든 디자인 토큰을 한눈에 볼 수 있게 해줍니다. 행(rows), 테마(themes), 모드(modes)를 잃어버리지 않고 쉽게 추가할 수 있으며, 토큰을 필터링할 수도 있습니다.

제품 또는 서비스 명명하기

만들 제품이나 서비스에 적절한 이름을 찾고 있다면, Onym은 브레인스토밍(brainstorming), 검증(vetting), 가이드, 스프린트, 어원학(etymologies)을 위한 도구와 리소스를 정리해 놓은 환상적인 오픈 소스 저장소입니다. 심지어 주의 사례나 무언가를 명명하는 에이전시, 그리고 참고할 만한 유용한 책들까지 모두 포함하고 있습니다.

무언가를 명명하기 위한 유용한 북마크

거의 모든 것—음, 아무거나—을 한 곳에서 명명하기 위한 도구와 가이드 목록입니다.

• 버튼 이름 짓기 → NN/g on UI copy
• 클래스명 짓기 → classnames.paulrobertlloyd.com
• 색상 이름 짓기 → parrot.color.pizza
• 디자인 토큰 이름 짓기 → Intuit’s design token taxonomy
• 기능 이름 짓기 → Shopify Polaris naming guide
• 아이콘 이름 짓기 → Iconography guide
• 레이어 이름 짓기 → goodpractices.design
• 제품 이름 짓기 → guide.onym.co
• UI 컴포넌트 이름 짓기 → component.gallery
• UI 동작(행동) 이름 짓기 → namethatui.com
• 변수 이름 짓기 → Vodafone UK Variables Taxonomy Map 및 naming-cheatsheet on GitHub
• UI 용어 → Moccu’s naming convention framework

마무리하며

올바른 이름이란 팀과 사용자가 잘 이해하고 사용하는 이름입니다. 디자이너의 용어, 개발자의 용어, 제품 관리자의 용어, 그리고 사용자의 용어 등 같은 것을 말하면서도 서로 다른 방언을 쓰는 데 너무 많은 시간이 낭비됩니다. 이것이 종종 좌절감과 혼란을 야기합니다.

따라서 채택률(adoption)이 낮다면 단지 이름 때문일 수도 있습니다. 그리고 잠재적인 **명명 충돌(naming conflicts)**에 주의를 기울이고 이를 나중에 다룰 항목 목록(backlog)에 넣어두세요. 이는 팀이 더 잘 협력하고 좌절감과 혼란을 줄이는 데 도움이 될 수 있는 사소하지만 중요한 세부 사항 중 하나입니다.

편집자 노트

이 멋진 프로젝트들이 유용하기를 바랍니다. 이 프로젝트들은 훌륭한 크리에이터들에 의해 만들어졌습니다. 자신의 작업을 다른 사람들이 사용하고 배울 수 있도록 공유해 주는 모든 분들께 감사드립니다! 이것이 우리가 웹과 그것을 만들고 디자인하는 사람들을 진정으로 사랑하는 이유 중 하나입니다. 💚

Smashing에서는 웹을 사랑합니다. 그래서 우리는 웹에 관한 모든 것들에 대해 기사, 책을 출판하고 워크숍 및 이벤트를 개최합니다. 우리가 모두 웹을 더 접근하기 쉽고 사용하기 좋게 만들기 위해 무엇을 할 수 있는지 보는 것을 좋아합니다. 또한 온라인 이벤트를 조직하고 참석하는 것도 좋아하며, 대규모 그룹(5명 이상) 및 학교와 학생들에게는 할인 혜택이 제공됩니다. 관심 있으신가요? 그냥 이메일을 보내주세요 그러면 저희가 처리해 드리겠습니다!

• 여러 실시간 세션(각 2.5시간),
• 미국 태평양 시간(PT) 기준 오전 9:00 – 11:30 (중앙 유럽 시간(CET) 기준 오후 6:00 – 8:30)
• 워크숍 비디오 녹화본 및 슬라이드 제공,
• 무료 비디오 미리보기 (2.5시간)
• 모든 워크숍으로 이동 →