LG 유플러스 URECA 2기

2025 LG 유플러스 유레카 부트캠프 '프론트엔드 대면반' 기록

1. HTML

2. CSS

7.UX

디자인 시스템

디자인 시스템의 필요성

• 디자인 시스템은 디지털 서비스의 확장 가능성을 고민하고, 디자인 구성 요소를 반복적으로 활용하는 방법을 제공

• 디자인 시스템의 장점

• 일관성의 향상

  • 내부 일관성
    • 제품에 새로운 기능이나 페이지가 추가할 때, 시각적, 기능적으로 일관성 있는 디자인 규칙에 따라 제작한다면 사용자는 새로운 작업 방식을 학습할 필요 없음
  • 외부 일관성

• 시간의 절약

• 공통된 페이지로의 협업

디자인 시스템의 구조

참고 자료 [G마켓 디자인 시스템] https://gds.gmarket.co.kr/

1. 개요
2. 파운데이션 : 가장 기초가 되는 디자인 요소의 모음
3. 컨포넌트 : 디자인 시스템에서 재사용 가능한 구성 요소
4. 패턴
5. 기타

스타일 가이드

• 일련의 디자인 원칙을 정리한 문서

• 스타일 가이드 작성법

  • 제품의 전체적인 모양과 느낌을 정의한 일반적인 지침을 포함하여 사용자에게 전달하려는 메시지를 명확하고 동일한 방식으로 전달할 수 있도록 작성

시스템 가이드

디자인 시스템을 운영하고 관리하는 데 사용할 가이드 문서

목적 : 디자인 시스템 운영과 디자인 시스템 구축으로 이루고자 하는 목적 정의 사람 : 디자인 시스템을 운영하는 부서와 담당자, 수정할 수 있는 사람, 검토 권한이 있는 담당자 ('사람'을 아예 안 쓰는 경우도 많다)

디자인 시스템 구축 방법론

아토믹 디자인

• 디자이너와 개발자 사이의 협업이 용이하도록 브래드 프로스트가 고안한 디자인 시스템

• 화학의 원리를 이용해 컴포넌트의 구조를 원자 > 분자 > 유기체 > 템플릿 > 페이지 단위 로 구성하여 전체 디자인 시스템을 구축하는 방식

더블 다이아몬드 방법론