Close

카테고리

디자인 컴포넌트 템플릿

작성자: Tony Starr, 선임 콘텐츠 디자이너 @ Atlassian팀

정성 들여 문서화된 디자인 컴포넌트의 라이브러리를 만드세요.

템플릿 사용
디자인 컴포넌트 템플릿

팀에서 디자인에 사용하는 모든 컴포넌트를 추적하는 것은 특히 팀이 성장하는 중이라면 어려울 수 있습니다. 디자인 컴포넌트 템플릿을 사용하면 컴포넌트의 역할 및 그 구조와 같은 기초부터, 다른 컨텍스트에서 어떻게 작용하고 어떠한 모양인지에 대한 세부 사항에 이르기까지 각 컴포넌트를 문서화하도록 도와줍니다. 콘텐츠, 액세스 가능성, 이동성 등을 위한 컴포넌트별 규칙을 설명할 수 있는 추가적인 안내를 위한 섹션도 있습니다. 완전한 컴포넌트 라이브러리를 만드세요!

디자인 컴포넌트 템플릿을 사용하는 방법

1단계. 기초적인 것부터 시작

컴포넌트의 세부 정보를 자세히 다루기 전, 기본적인 것을 작성해야 합니다. 컴포넌트 기본 사항의 열을 작성하는 것부터 시작하세요. 컴포넌트에 이름을 지정하고, 컴포넌트의 역할을 설명하고, 번호가 매겨진 호출이 포함된 구조 다이어그램을 업로드하세요. 이러한 호출을 사용하여 키를 만들고 컴포넌트 구조의 각 요소를 정의하세요. 이 섹션의 목적은 컴포넌트를 사용하는 사람들이 모든 것이 어떻게 작용하는지 이해하도록 만드는 것입니다.

2단계. 세부 정보 제시

더 큰 기능을 위한 디자인의 일부로 컴포넌트를 사용할 여러 방법을 다루는 단계입니다. 디자인에서의 전체적인 목적을 포함하여 컴포넌트가 어떻게 사용되는지 설명하고, 다른 컨텍스트에서 어떻게 작용하고 어떠한 모양인지 설명하세요. 디자인 시스템의 리포지토리에서 가져온 라이브 코드를 사용하여 여러 변형을 보여주세요. 마지막으로, 컴포넌트의 시각적 스타일을 설명하세요. 해야 할 것과 하지 말아야 할 것에 관한 예시를 포함하세요.

3단계. 팁, 유용한 정보 및 모범 사례 문서화

모든 컴포넌트에는 특징이 있습니다. 추가 지침에 이를 기록하세요. 콘텐츠부터 시작하세요. 이 컴포넌트에 해당하는 구두점 규칙이 있나요? 표준 라벨은 어떤가요? 컴포넌트별 액세스 가능성 주의 사항 및 컴포넌트를 모바일 환경에 적용하는 팁과 함께 작성하세요. 컴포넌트가 사용되는 방법에 대한 업계 표준 모범 사례가 있는 경우 그것도 나열하세요. 마지막으로, 관련된 컴포넌트나 패턴에 대한 링크를 추가하세요.

3단계. 팁, 유용한 정보 및 모범 사례 문서화
Atlassian팀

Tony Starr

선임 콘텐츠 디자이너 @ Atlassian팀


Tony는 Atlassian의 선임 콘텐츠 디자이너입니다. 콘텐츠 안내의 기준을 세우고 그 한계를 시험하기 좋아하는 종합적인 기술 및 콘텐츠 작성자입니다.

  • Content design glossary template

    Atlassian팀

    Content design glossary

    Teach writers how to use product names, industry terms, and other content with an A-Z guide.

    템플릿 사용 자세히 보기
  • Customer interview report template

    Atlassian팀

    고객 인터뷰 보고서

    고객 인터뷰 보고서를 사용하여 고객 인터뷰에서 통찰력을 얻으세요.

    템플릿 사용 자세히 보기
  • Design decision template

    Atlassian팀

    Design decision

    Use our design decision template to review design options, present design examples, and log design decisions. 

    템플릿 사용 자세히 보기