01. UI 디자인 패턴

---

"화면에 배치할 수 있는 자주 쓰이는 컴포넌트”

• UI 디자인 패턴은 과거 자주 반복되는 문제점을 다른 사람이 해결한 결과물을 재 사용하기 좋은 형태로 만든 패턴을 말한다.
• 재귀로 구현한 Tree UI도 자주 쓰이는 UI 디자인 패턴 중 하나이다.

🔨 1. 모달(Modal)

• 기존에 이용하던 화면 위에 오버레이되는 창을 말한다.
• 닫기버튼 or 모달범위 밖을 클릭하면 모달이 닫히는 것이 일반적이며, 모달을 닫기 전엔 기존화면과 상호작용할 수 없다.
• 팝업창과 구분되는 개념으로

  1) 팝업은 브라우저에 의해 강제로 막힐 수 있지만,
  2) 모달은 브라우저 설정에 영향을 받지 않는다.

  ⇒ 따라서 꼭 보여주고 싶은 내용이 잇다면 모달을 사용하는 것이 좋다.
  

🔨 2. 토글(Toggle)

• On/Off를 설정할 때 사용하는 스위치 버튼을 말한다. 여러 개의 옵션을 둘 수도 있다.
• 색상, 스위치의 위치, 그림자 등에 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만든다.
• 여러 개의 옵션을 둘 수 있는데, 옵션이 너무 많다면 탭 사용을 고려한다.

🔨 3. 태그(Tag)

• 컨텐츠를 설명하는 키워드를 사용해 라벨을 붙이는 역할을 한다.
• 사용자는 자신이 작성한 콘텐츠에 태그를 붙여 콘텐츠를 분류하거나, 관련 컨텐츠만 검색할 수 있다.
• 태그는 사용자가 직접 작성하게 하거나, 개발자가 정해줄 수 있다.

🔨 4.태그(Tag)

• 컨텐츠를 설명하는 키워드를 사용해 라벨을 붙이는 역할을 한다.
• 사용자는 자신이 작성한 콘텐츠에 태그를 붙여 콘텐츠를 분류하거나, 관련 컨텐츠만 검색할 수 있다.
• 태그는 사용자가 직접 작성하게 하거나, 개발자가 정해줄 수 있다.

🔨 5. 자동완성(Autocomplete)

• 사용자가 입력 중일 때 사용자가 입력하고자 하는 내용과 일치성이 높은 항목을 보여주는 것이다.
• 장점 : 사용자가 정보를 직접 입력하는 시간을 줄여준다.
• 주의점 : 자동완성항목에 갯수를 제한하는 것이 좋으며, 키보드 방향 키나 클릭 등으로도 접근할 수 있도록 하는 것이 좋다.

🔨 6. 드롭다운(Dropdown)

• 선택할 수 있는 항목을 숨겨놨다가, 펼치면 항목을 선택할 수 있게 한다

🔨 7. 아코디언(Accodion)

• 폈다 접었다 할 수 있는 컴포넌트로, 보통 같은 분류의 아코디언을 여러 개 연속해 배치한다.

사용용도
1) 화면을 깔끔하게 구성하기 위해
2) 콘텐츠를 담아놓기 위한 용도 → 핵심 내용을 먼저 전달하기 위해
3) 트리 구조의 콘텐츠를 렌더링, 메뉴바로 사용 → 상하 관계를 표현하기 위해

🔨 8. 캐러셀(Carousel)

• 공항의 수하물 컨베이어 벨트, 또는 회전목마라는 뜻으로, 돌아가는 컨텐츠 UI 디자인 패턴을 말한다.
• 자동 혹은 사용자가 클릭 해 넘어가는 형식 중 선택할 수 있다

🔨 9. 페이지네이션(Pagenation)

• 번호를 붙여 페이지를 구분하는 것을 말한다.
• 장점 : 사용자가 원하는 페이지로 바로바로 접근 가능하다.
• 단점 : 페이지를 넘기기 위해서 잠시 멈춰야 함으로 → 매끄러운 사용자 경험(UX)을 해칠 수 있다.

🔨 10. 무한 스크롤(Infinite Scroll, Continuous Scroll)

• 모든 컨텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있다.
• 이지네이션과 비슷하게 한번에 띄우기엔 정보가 많을 때 사용한다.
• 장점 : 페이지네이션과 같이 잠시 멈춰 페이지를 선택할 필요가 없어 보다 매끄러운 사용자 경험을 제공한다.
• 단점 : 컨텐츠의 끝을 알 수 없고, 지나친 컨텐츠를 찾기 어렵다. → 해결하기 위해 페이지 맨 아래에 도달하면 추가 컨텐츠를 로드하는 방식으로 구현한다.
  

🔨 11. GNB(Global Navigation Bar), LNB(Local Navigation Bar)

1) GNB는 어드 페이지에 들어가든 사용할 수 있는 최상위 메뉴이다.

• GNB는 상상 동일한 위치에 있어야 한다.

2)LNB는 GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴를 말한다.

02. UI 레이아웃 구성법

---

"컴포넌트들을 화면에 어떻게 배치할지 정하는 방법론”

🔨 1. 그리드 시스템(Grid System)

• 그리드(grid)는 수직, 수평으로 분할된 격자무늬를 뜻하며, 화면을 격자로 나눈 다음 → 격자에 맞춰 컨텐츠를 배치하는 방법이다.
• 웹 디자인에선 화면을 세로로 몇개의 영역으로 나눌 것인 가에 따른 "컬럼 그리드 시스템(Column Grid System)"을 사용하며
• Margin, Column, Gutter라는 세 가지 요소로 구성된다.

🔧 1. Margin

• 화면의 양쪽 여백을 의미한다.
• 너비를 절대단위 px를 사용해 고정값으로 사용하거나, 상대단위 vw, %를 사용해 유동성을 줄 수도 있다.

🔧 2. Column

• 콘텐츠가 위치하게 될, 세로로 나눠진 영역을 말한다.
• 컬럼 갯수를 임의로 나룰 수 있지만 → 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.
• 각 디바이스의 화면 크기에 맞춰 내가 만들 UI의 컬럼 갯수를 정하면 된다.

💡 Column은 상대 단위를 사용해 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다. ⇒ 기기마다 화면의 크기가 다르고, 사용자가 브라우저의 크기를 맘대로 바꿀 수 있기 때문.

🔧 3. Gutter

• Column 사이의 공간으로, 콘텐츠를 구분한다.
• Gutter의 간격이 좁을수록 → 콘텐츠들이 연관성 있어 보이고, 넓을수록 → 각 콘텐츠가 독립적인 느낌을 준다.
• Gutter는 아무리 넓어도 컬럼 너비보다는 작게 설정해야 한다.

🔨 2. 컬럼 그리드 시스템 예시

🔧 1. 네이버

• 화면이 12개 컬럼으로 나누어져 있고, 컬럼에 맞춰 콘텐츠가 배열되어 있다.

🔧 2. 코드스테이츠 블로그

• 화면이 12개의 컬럼으로 나누어져있고, 가로로 3개의 콘텐츠가 컬럼 4개 만큼의 너비를 차지한다.

🔨 3. 컬럼 그리드 시스템으로 보는 반응형 웹

컬럼 그리드 시스템을 활용할 때 화면 가로 길이에 따라서 컬럼 개수가 다르도록 코드를 작성하면,

⇒ 다양한 디바이스와 다양한 환경에 유연하게 대응하는 UI를 만들 수 있으며, 이를 반응형 웹 이라고 부른다.