# 뱅크샐러드의 Product language 제작 과정 Product language 소개 글에 이어 이번에는 어떤 식으로 구성하고 구축했는지에 초점 맞춘 뱅크샐러드의 블로그 글입니다. “Design System은 미리 만들어진 블록을 쌓아 일관되고 효율적으로 디자인을 할 수 있게 해주는 디자인을 위한 장치라면, Product Language는 디자이너뿐만 아니라 제품을 둘러싼 사내의 모든 구성원이 사용하는 언어입니다. (...) 우리는 디자이너에 의한 Design System에서 한발 더 나아가, 모든 구성원이 제품을 기획하고, 디자인하고, 개발하는데 사용하는 공통 언어인 BPL을 ‘Product Language’라고 부르게 되었습니다.” 시스템이 아니라 언어라고 명명한 것에서 볼 수 있듯, 어떤 규칙을 세웠는지를 참고해서 보시면 좋을 것 같습니다. 글에서는 아래와 같은 것들을 다룹니다. 1️⃣ 컴포넌트를 어떻게 구성했는가 : Scene - Container - Element 2️⃣ 각 컴포넌트를 어떻게 명명했는가: 기본적으로 고유번호_Category/(Type)/Name의 규칙으로 지어짐 3️⃣ 어떻게 공유되었는가: 개발 가이드(맞춤법)와 사용자 가이드(문법). BPL의 모든 컴포넌트는 Figma에서 디자인 및 가이드됨. 4️⃣ 버전관리: 뱅크샐러드 자체 제작 피그마 플러그인 사용 (Component List Generator), 버전별 수정 내역을 기록하고, 컴포넌트별 개발 현황 파악 5️⃣ 새로운 컴포넌트 관리: 스쿼드 디자이너 (프로덕트 디자이너)가 필요한 디자인을 하고, BPL디자이너와 페어링을 진행하거나 새로운 컴포넌트를 제안할 수 있음. 후자의 경우 신규 컴포넌트를 실험군으로 실험을 진행하고, 실험군이 유의미한 결과로 승리한다면 대조군을 대체 글 내용도 좋지만 피그마 플러그인도 오픈소스로 공유하고 있어 추천합니다 :)

Banksalad Product Language는 어떻게 디자인되었나요? | 뱅크샐러드

Banksalad

Banksalad Product Language는 어떻게 디자인되었나요? | 뱅크샐러드

2021년 1월 17일 오후 7:51

댓글 0

주간 인기 TOP 10

지난주 커리어리에서 인기 있던 게시물이에요!