디자인
Backstage 오픈 소스처럼 이 문서도 살아 있는 문서예요! 우리 관행이 발전함에 따라 이 문서를 계속 업데이트할 거예요!
출처: 문서
본문
Backstage 오픈 소스처럼 이 문서도 살아 있는 문서예요! 우리 관행이 발전함에 따라 이 문서를 계속 업데이트할 거예요!
📚 우리의 철학
반복적(Iterative)
Backstage 오픈 소스는 갓 시작된 노력이며, 우리 디자인 관행을 확장하게 되어 정말 기뻐요! 그런 만큼 우리는 여러분, 커뮤니티와 긴밀히 협력하고, 진행하면서 무엇이 가장 잘 작동하는지 반복하고 실험할 거예요. 지속적인 작업 중(work in progress)인 만큼, 일찍 그리고 자주 릴리스하는 것을 지향해요. 그뿐 아니라 개발자들과 협력해 원활하고 쉬운 인수인계(handoff)를 만들기 위해 전념해요. 우리가 어떻게 성장하는지 궁금하고 그 성장에 역할을 하고 싶다면 이 GitHub 저장소의 이슈를 확인해보세요!
협력적(Collaborative)
Backstage 디자인 팀은 작지만 강하며, Backstage 오픈 소스 커뮤니티와 함께 일할 놀라운 기회를 진심으로 소중히 여겨요! 아이디어가 있나요? 컴포넌트 요청이 있나요? Discord(#design 채널)로 자유롭게 연락해주세요. 협력이 개인의 속도보다 우월하며, 우리는 Backstage가 모든 사용자를 위해 작동하도록 여러분과 함께 일하고 싶어요.
투명(Transparent)
곧 많은 흥미로운 일들이 다가오고 있어요. 계속 소식을 놓치지 마세요! GitHub의 마일스톤(Milestones)을 주시해 우리가 어디로 향하는지 확인하고, 공개 디자인 이슈(open design issues)를 검토해 도울 수 있는지 보세요. Discord의 #design 채널에서도 업데이트를 게시할 거예요. 그뿐 아니라 우리가 내린 결정과 그 이유에 대해서도 알려드리고 싶어요.
🛠 우리의 관행
아래 차트는 우리가 어떻게 일하는지 자세히 보여줘요. 우리는 Figma UI 키트를 가지고 있으며, 커뮤니티와 사양과 프로토타입을 공유하기 위해 Figma 문서를 참조하고 있어요.
새 디자인 컴포넌트 만들기
| Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6 | |
|---|---|---|---|---|---|---|
| Platform design team submits an issue to backstage/backstage GitHub with a potential component. | Backstage community offers feedback or approval on backstage/backstage GitHub. | Platform design team adjusts accordingly (as they see fit) and update the Figma DLS document. | Designed component is added to backstage/backstage GitHub as an issue. | External or internal Backstage open source contributors build the component. | External or internal contributors add the component to the Backstage Storybook. 🎉 |
Backstage를 위한 구축
| Step 1 | Step 2 | Step 3 | Step 4 | |
|---|---|---|---|---|
| External or internal contributors use Backstage and come up with an idea of an entity to build for Backstage. | External or internal contributors refer to the Backstage Open Source design system documentation in the Figma DLS document. | External or internal contributors leverage the components and tokens from the Backstage Storybook. | External or internal contributors build their Backstage entity. |
| Step 5 | Step 6 | Step 7 | Step 8 | |
|---|---|---|---|---|
| External or internal contributors make a pull request for their entity on backstage/backstage GitHub for review. | Platform designers and devs review the entity and submit feedback or approval on backstage/backstage GitHub. | External or internal contributors make the changes, pull request is approved and the entity is merged. It's live on Backstage! 🎉 | If the entity happens to be or include a UX component, it's added to Backstage Storybook as well. |
다음 다이어그램은 Backstage 디자인 시스템과, Backstage 디자인 팀이 내린 사용자 경험과 사용자 인터페이스 결정에 의해 형성된 Material UI로 구성된 우리의 기반 사이의 관계를 보여줘요. 또한 우리가 만든 핵심 경험을 가져다가 여러분의 조직을 더 잘 나타내도록 사용자 지정 테마를 추가하는 것을 권장한다는 점도 주목하세요!
✅ 우리의 우선순위
Backstage 디자인 시스템
이것은 Backstage 기여자들이 Backstage용 멋진 플러그인을 만들 때 활용할 빌딩 블록 집합이에요! 우리 팀과 Backstage 커뮤니티가 이미 검증한 컴포넌트를 사용할 수 있는데 왜 바퀴를 다시 발명할까요? 모든 Backstage에서 응집력 있고 일관된 사용자 경험을 만드는 정신에 따라, 모든 플러그인 개발자가 우리 Storybook을 참조로 활용할 것을 강력히 권장해요. 우리 디자인 시스템은 새롭고 진화 중이며, 여러분의 도움으로 구축해 나갈 거예요!
핵심 Backstage 사용자 경험
이것은 모든 Backstage 사용자가 공유하는 보편적 사용자 경험이에요. 플러그인 디렉토리 같은 더 구체적인 측면부터 Backstage의 종단간 워크플로 같은 더 추상적인 측면까지, 우리는 커뮤니티와 함께 여러분과 여러분의 조직에 가장 잘 서비스를 제공하는 핵심 사용자 경험을 만들기 위해 일할 거예요.
⭐️ 기여하는 방법
이슈를 집어 들어라!
처음에는 우리의 이슈 대부분이 Backstage 디자인 시스템을 위한 보편 컴포넌트를 만들고 플러그인 개발자가 참조할 수 있도록 Storybook에 추가하는 것에 중심을 둘 거예요. 또한 핵심 Backstage 사용자 경험을 구축하는 데 초점을 맞춘 이슈도 만들 거예요. GitHub의 이슈에 'design' 및/또는 'storybook' 라벨을 붙일 거예요. 관심 있는 작업을 둘러보고 해결해보세요. 이슈에 관해 질문이 있으면 이슈의 댓글 섹션이나 Discord에서 물어볼 수 있어요. 우리는 외부 기여자를 몹시 사랑하며, 기여에 대한 가상의 semlas를 보내드릴 거예요!
컴포넌트 요청
이슈를 만들고(design 라벨을 붙이고 katz95에게 할당) 또는 Discord(#design 채널)로 컴포넌트가 무엇이고 관련 사용 사례가 무엇인지 자세히 메시지를 보내주세요. 요청은 우리 디자인 팀이 검토하며 1-2 영업일 내에 연락이 갈 거예요. 요청한 컴포넌트가 우리 팀에 의해 우리 디자인 시스템에 추가될 항목으로 받아들여질지 알려드릴 거예요.
✏️ 리소스
Storybook - 컴포넌트를 볼 수 있는 곳이에요. 우리 디자인 시스템 구축에 도움을 주고 싶다면 우리가 디자인한 컴포넌트를 Storybook에 추가할 수도 있어요.
Figma - Figma Community를 사용해 디자인 자산을 공유하게 되어 기뻐요. UI 키트를 복제하고 Backstage용 나만의 플러그인을 디자인할 수 있어요.
Discord - 모든 디자인 질문은 #design 채널로 보내야 해요.
Customizing Your App's UI - 테마를 확장해 Backstage 인스턴스의 모양과 느낌을 사용자 지정하는 방법.
🔮 미래
디자이너의 기여
Backstage를 구현하는 조직의 디자이너인가요? 개발자 생산성 문제 공간에 매료된 디자이너인가요? 오픈 소스 디자인에 궁금한 디자이너인가요? 기여해주시길 바라요. 무대 뒤에서 우리는 디자이너로서 Backstage에 기여하는 것을 쉽게 만들 몇 가지 기반 요소를 준비하고 있어요. 스타일링 지침부터 UX 원칙, Figma 문서까지, 이 프로젝트에 참여할 수 있도록 준비해드릴 거예요. 여러분과 함께 일하게 되어 기뻐요! 그동안 Discord에서 여러분의 소식을 듣고 싶어요.