[스파르타 코딩클럽] 부트캠프

[내일배움사전캠프] 25.05.08 (목)

marketing-moong 2025. 5. 8. 17:38

📌 오늘 학습 키워드

  • 디자인 시스템
  • UI
  • 컴포넌트

📖 오늘 학습한 내용을 나만의 언어로 정리하기

❓디자인 시스템

[디자인 시스템이 필요한 이유]

  • 프로덕트를 만드는 디자이너들은 사용자들이 겪는 문제를 찾아 디자인으로 개선한다. 
  • UI는 다른 디자이너도 똑같은 방법으로 만들고 쓸 수 있어야 하고, 개발자도 같은 생각을 해야 한다. 
  • 반복적인 IU를 효율적으로 관리하여, 팀 전체가 같은 정도로 이해하게 하기 위해. 

[디자인 시스템이란?]

 UI 구조, 쓰는 방법, 유의해야 하는 부분까지 상세하게 적혀 있는 문서 

  • UI 키트는 재료의 목록만 있는 상태 
  • 디자인 시스템은 재료 목록과 다듬는 방법, 조리법까지 상세하게 나와있는 요리책인 샘이다. 
장점 단점
1. 디자인을 반복해서 사용할 수 있어서 시간과 비용이 절약된다.
2. 누가 만들어도 동일한 품질의 제품을 설계할 수 있다. 		 1. 다양한 형태의 UI를 모아 하나로 통일하는 과정이 오래 걸린다. 
2. 새로운 디자인이 필요한데, 디자인 시스템을 활용해야 한다는 고정관념 때문에 혁신이 줄어들 수 있다. 

❓UI

[UI의 분류]

  • 액션 : 사용자가 중요한 행동을 수행할 때 사용. 대표적으로 버튼이 있다. 
  • 인풋 : 사용자의 입력을 받을 때 사용한다. 텍스트를 입력할 수 있는 텍스트 필드, 셀렉트 박스가 해당한다.
  • 인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용
  • 컨테이너
  • 내비게이션 : 사용자가 페이지를 이동할 때 사용 
  • 컨트롤 : 사용자가 설정이나 값을 수정할 때 사용 

❓컴포넌트

컴포넌트를 분석하고 공부할 땐 컴포넌트의 형태가 아니라 정의와 뜻에 집중해야 한다. 

 

1. 버튼 컴포넌트 

액션에 해당하는 컴포넌트로, 누름으로써 중요한 동작을 수행하는 요소이다. 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트를 충분히 드러내야 한다. 우리는 이것을 행동을 유도하는 속성이라고 해서, 행동유도성 즉 '어포던스'라고 부른다. 

 

버튼 컴포넌트는 컨테이너(안에 있는 요소를 감싸고 있는 프레임), 라벨/레이블(버튼의 행동을 안내하는 글자), 리딩 엘리먼트(버튼보다 앞쪽에 있다는 뜻), 트레일링 엘리먼트(버튼 라벨보다 뒤쪽에 있다는 뜻)으로 구성된다. 

 

2. 텍스트필드 컴포넌트 

 

플레이스 홀더에 값을 입력하기 시작하면 정보가 사라지기 때문에 입력값의 조건을 적지 않는 것을 권장한다. 입력값의 조건은 헬퍼 텍스트 부분에 입력해주는 것이 좋다. 

 

사용자가 입력한 텍스트가 유효한지 아닌지를 검사해주는 것을 '유효성 검사'라고 한다. 적절한 문구와 안내로 사용자가 다시 행동을 완료할 수 있도록 유도해야 한다. 유효성 검증은 그 적절한 문구와 안내를 담당하는 중요한 부분이다. 

 

3. 컨트롤 컴포넌트 

사용자가 선택지를 특정할 수 있도록 하는 요소이다. 여러 선택지 중 사용자가 원하는 것을 고를 수 있도록 돕는 요소이다. 다른 UI에 비해 크기가 매우 작기 때문에, 요소 자체는 작더라도 그 주변으로 최소 크기 범위를 만들어주면 사용자들이 선택하기가 쉽다. 컨트롤 요소는 라벨과 함께 쓰이는 경우가 많은데, 따라서 라벨을 누르더라도 컨트롤 요소가 터치될 수 있도록 해주는게 좋다. 

 

4. 체크박스 컴포넌트 

체크박스의 디자인은 시스템들마다 제각각이다. 일반적으로 여러 선택지 중 1개 이상을 선택할 때 사용하는 컴포넌트다. 체크됨과 체크되지 않음 두 가지 상태를 가지는 경우가 기본적이다. 

 

5. 라디오 컴포넌트

여러 선택지 중 1개를 선택할 때 사용하는 컨트롤 컴포넌트다. 동시에 여러 개를 선택할 수 없으며, 아무것도 선택하지 않는 것이 불가능하다. 따라서 사용자가 많이 선택하는 항목을 기본값으로 설정해두는 것이 사용자의 편의성을 증대시켜준다. 

❓UI 만들 때 도움이 되는 관점 

버튼마다 모양도, 색상도 다르지만 우리는 같은 버튼으로 인식한다. 그렇지만 모두 버튼이라고 받아들이는 이유는, 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문이다. 따라서 UI를 비교하고 공부할 때는 형태가 아니라 반드시 UI의 목적, UI의 기능에 초점을 두고 공부해야 한다. 

❌ 학습하며 겪었던 문제점 & 에러 

  • 여러 가지 용어들을 이해하는데 시간이 오래 걸렸다. 

🎯 내일 학습할 내용

  • 간단한 UI 직접 만들어보기