Web Guide컴포넌트재사용 부품UI 라이브러리
컴포넌트 라이브러리 만들기
같은 버튼을 화면마다 다시 만들면 언젠가 서로 달라집니다.
한 번 만들어 여러 곳에서 불러 쓰면, 고칠 때도 한 번만 고치면 됩니다.
01재사용의 이점
같은 요소를 여러 곳에서 각각 만들면, 나중에 수정할 때 모든 곳을 찾아 고쳐야 합니다. 하나라도 빠뜨리면 그곳만 달라집니다.
부품으로 만들어 불러 쓰면 한 곳만 고쳐도 전체에 반영됩니다.
각각 만들 때
수정 시 모든 곳을 찾아야 함 · 빠뜨리면 불일치 · 새 페이지마다 다시 작업 · 시간이 지날수록 제각각
부품으로 만들 때
한 곳만 고치면 전체 반영 · 새 페이지는 불러 쓰기만 · 일관성 자동 유지 · 제작 속도 향상
02무엇을 부품으로 만들까
여러 곳에서 반복되는 요소가 대상입니다. 한 번만 쓰이는 것은 부품으로 만들 필요가 없습니다.
두 번 이상 나오면 부품으로 만드는 것을 검토하세요.
01
버튼
가장 많이 쓰입니다. 유형과 상태별로 정의합니다.
02
입력 요소
입력칸, 선택, 체크박스, 라디오.
03
카드
목록에 쓰이는 항목 단위.
04
알림·경고
성공, 오류, 안내 메시지 박스.
05
배지·태그
상태나 분류 표시.
06
헤더·푸터
모든 페이지 공통 영역.
07
페이지네이션
목록 하단의 페이지 이동.
03변형을 정의한다
같은 버튼이라도 주 버튼과 보조 버튼, 큰 것과 작은 것이 있습니다. 이런 변형을 미리 정의해 두면 필요할 때 골라 쓰면 됩니다.
변형을 정의하지 않으면 그때그때 새로 만들게 되고, 결국 제각각이 됩니다.
유형
주 버튼, 보조 버튼, 텍스트 버튼.
크기
큰 것, 기본, 작은 것. 세 가지면 충분합니다.
상태
기본, 마우스 올림, 누름, 포커스, 비활성, 처리 중.
아이콘 유무
아이콘만, 아이콘+글자, 글자만.
폭
내용에 맞는 폭, 전체 폭.
04디자인과 개발이 같은 것을 본다
디자인 파일의 부품과 실제 구현된 부품이 다르면 의미가 없습니다. 둘이 같은 규칙을 따라야 합니다.
디자인 도구에서 부품을 만들고, 개발에서도 같은 이름으로 구현하면 소통이 쉬워집니다.
이름 통일디자인과 개발이 같은 이름을 씁니다. '주 버튼 - 큰 크기'.
디자인 도구 부품화디자인 파일에서도 재사용 가능한 형태로 만듭니다.
구현 확인디자인과 구현물이 일치하는지 검수합니다.
변경 동기화한쪽이 바뀌면 다른 쪽도 반영합니다.
목록 문서어떤 부품이 있는지 한눈에 보는 페이지를 만들면 유용합니다.
CHECK POINT
□ 반복되는 요소를 부품으로 만들었는가
□ 버튼의 유형·크기·상태가 정의되어 있는가
□ 디자인과 개발이 같은 이름을 쓰는가
□ 디자인 파일에서도 부품으로 관리하는가
□ 구현물이 디자인과 일치하는지 검수했는가
□ 어떤 부품이 있는지 볼 수 있는 목록이 있는가
□ 새 페이지를 만들 때 기존 부품을 쓰는가
#컴포넌트#재사용 부품#UI 라이브러리#디자인 시스템#일관성#디자인 개발 협업#유지보수#홈페이지 디자인#웹비스타#홈페이지 제작