1. 내비게이션의 의의와 목적

• 웹사이트를 이리저리 탐색하는 것은 귀찮을 수 있다.
• 그런 이동거리를 최소화하고 비슷한 목차들을 묶어서 보기 쉽게 하기 위해 우리는 내비게이션을 만든다.

2. 내비게이션의 종류

• 글로벌 내비게이션 (Global Navigation)
  • 웹 사이트의 모든 화면에서 고정적으로 볼 수 있다. 
  • 사이드바나 메뉴의 형태를 가지고 있다.
  • 상단에 버튼을 배치하거나 좌측에 슬라이드로 빼기도 한다. 모바일 버전에서는 하단에 배치하거나 햄버거 버튼을 이용하기도 한다.

• 유틸리티 내비게이션 (Utility Navigation)
  • 도움말이나 프린트, 설정과 같은 메뉴를 보여준다.
  • 아바타 아이콘 뒤에 숨겨놓거나 하는 등의 기능을 하며, 각각의 설정이 있을 수 있는 앱에 주로 사용된다.
• 연관 및 인라인 내비게이션 (Associative and Inline Navigation)
  • 콘텐츠를 직접적으로 유저가 이용하고 있을 때, 유저의 편의를 위해서 즉시 도움을 줄 수 있는 요소들을 보여준다.
  • 관련 있는 콘텐츠들을 묶는 역할도 한다.
  • 가끔은 유저가 이용할 때 걸리적거릴 경우가 있다. 잘 생각해서 만들어야 한다.
• 태그 (Tags)
  • 콘텐츠들을 비슷한 종류별로 묶는다.
  • 소규모 블로그 등에는 꼭 사용할 필요는 없지만 사이즈가 커지면 커질 수 록 유용하다.
  • 블로그가 커질 경우를 대비해서 처음부터 만드는 것 도 좋다. (나중에 태그들을 하나하나 달아 주려면 고통스러울 것이다)
  • 콘텐츠의 마지막 부분에 단어들을 나열하여 만들어 준다.
• 소셜 (Social)
  • 웹사이트와 소셜미디어를 결합할 수 있다.
  • 뉴스나 각종 수치에 대한 그래프 그리고 인기 검색어 등 다양한 수치들을 나타낼 수 있다.

3. 디자인 할 때 고려할 점

• 내비게이션의 디자인과 시각적 표현 분리하기
  • 순서와 몇개의 목록을 보여줄지 고민하자
  • 독특한 디자인 보다는 편하게 사용할 수 있는 친숙한 디자인이 올바르다.
• 인지 부담
  • 마찬가지. 독특함보다는 편안함이 우선이다.
  • 평범한 아이콘과 위치 만약 필요하다면 작은 텍스트를 이용할 수 도 있다.
• 이동거리의 최소화
  • 글로벌 내비게이션이라면 폭을 넓혀서 디자인하자
  • 자주 접근하는 항목들을 글로벌 내비게이션에 담자
  • 반복적인 행동을 계속 하지 않도록 하며 콘텍스트 전환이 없이 모든 작업을 한 페이지에서 한 번의 로딩으로 끝낼 수 있도록 단계를 묶어 설계한다.

4. 패턴

• 명확한 진입점 (Clear Entry Points)
  
  • 많은 기능을 넣는것 보다는 확실히 목적을 알 수 있도록 명확하게 디자인한다.
  • 진입점을 정확히 하고, 유저로 하여금 고민하지 않아도 되도록 만든다.
• 메뉴 페이지
  • 웹사이트의 모든 페이지 정보들을 한 화면에 담아서 어떤 기능을 하는 페이지를 쉽고 빠르게 찾을 수 있도록 한다.
  • 페이지가 많아 복잡한 웹에 어울리며, 다른 방해 요소가 아무것도 없어서 온전히 내비게이션에 유저들을 집중시킬 수 있다.
  • 하지만 유저들은 거부감이 조금 있다. 텍스트가 가득하고 복잡하기 때문이다. 그렇지만 각 요소별로 잘 정리해 놓고 그나마 가독성이 좋게 만들어서 그런 점들을 보안할 수 있다.
• 피라미드
  • 메인으로 모든 페이지와 연결될 수 있는 페이지를 하나 만들고, 뒤로가기와 함께 이용하여 각각의 페이지들을 연결하는 형태이다.
  • 상품의 소개나 사진이나 정보의 나열에 쓰일 수 있다.
  • 사용자는 이동하는데 클릭하는 횟수가 줄어들고 각 페이지의 연결성을 높일 수 있다.
  • 하지만, 새부적으로 나눠놓은 콘텐츠의 연결성이 부족하면 유저 이탈로 이어질 수 있다.
• 모달 패널 (Modal Panel)
  • 열렸다가 닫치는 작은 모달을 만들어 표시한다.
  • 유저의 확실한 집중을 받을 수 있다.
  • 모달이 열려 있을때는 다른 곳으로 이동할 수 없으므로 로그인과 같은 내용들을 넣기 좋고, 모달의 뒤편에 있을 진짜 웹 사이트의 내용들을 두고 다른 기능들을 처리하기에도 편리하다. (ex: 장바구니, 회원가입 이후 로그인 등)
• 딥 링크 (Deep Link)
  • 유저가 웹 사이트를 이용하던 상태를 저장하여 다른 기기나 다른 장소와 시간에 다시 접속하였을 때도 그 맥락을 이어서 사용할 수 있게 해 준다.
  • 만족스러운 UX를 제공할 수 있다. (ex: 유튜브나 넷플릭스의 이어 보기)
  • 콘텐츠 상의 사용자의 위치를 추적한 후에 URL에 넣는 방식을 사용할 수 있다.
  • 링크를 유저들 간에 서로 공유할 수 있는 기능을 넣을 수 도 있다.
• 탈출구 (Escape Hatch)
  • 현재 화면에서 한 번에 벗어날 수 있게 해 준다.
  • 404 페이지와 같은 막다른 곳에서 '홈으로'와 같이 탈출구를 만들 수 있다.
• 메가 메뉴 (Fat Menu)
  • 간단한 메뉴를 만들어 놓고, 그 옆에 모든 메뉴를 보여주는 메뉴를 하나 더 만든다.
  • 복잡한 웹사이트일 경우 자주 사용하는 것들을 모아 간단한 메뉴를 만들어 놓는다.
  • 숙련자들을 위해 모든 기능을 찾을 수 있는 메뉴가 또 있는 것이다.
  • 드롭다운 방식이나 여타 이용하는 메뉴처럼 디자인할 수 있다(물론 엄청 커진다)
• 로그인 툴 (Sign-In-Tools)
  • 우측 상단에 프로필 사진 등을 누르면 유저의 상태에 관련한 모든 작업을 할 수 있는 메뉴를 만든다.
  • 로그인, 회원가입, 정보 수정 등 다양한 기능을 넣을 수 있고, 로그인을 자주 이용하는 웹 사이트일 경우 더 유용하다.
  • 너무 크게 만들면 안 된다.
• 프로그레스 인디케이터 (Progress Indicator)
  • 페이지를 진행하면서 지금 유저가 어디 있는지를 알려주는 인디케이터를 만든다.
  • 단계가 있는(ex: 회원가입 등) 작업을 유저가 하고 있을 때 어디까지 진행되었는지, 얼마나 남았는지를 시각적으로 보여줄 수 있다.
  • 페이지의 구석이나 상단에 크지 않은 사이즈로 배치하는 것이 옳다.
• 브레드 크럼 (Breadcrumbs)
  • 큰 카테고리를 나눠두고 그 아래에 더 작은 카테고리를 나눠 놓는 것이다.
  • 상품 판매 사이트에 상품의 종류를 나누기 위해 잘 사용된다. (ex: 전자제품 -> 주방용품 -> 베이킹 용품)

1. 버티컬 스택 (Vertical Stack)

• 세로줄로 콘텐츠를 정렬한다. 아래로 스크롤되는 형식이다.
• 가로길이 보다 세로가 긴 모바일 기기에서 활용하기 유용하다.
• 언제 사용하나요?
  • 거의 대부분의 모바일 웹에서 사용한다. (게임과 같은 몰입형 콘텐츠 제외)
• 어떻게 활용할까요?
  • 상단에 중요한 내용을 넣는다.
  • 섬네일 이미지를 잘 활용할 수 있다.
  • 버튼이나 텍스트의 크기가 커지거나 언어가 변경되어 길어지면 양 옆으로 분리시킨다.

2. 필름 스트립 (Filmstrip)

• 스와이프 하여 화면을 전환해서 콘텐츠를 배치한다.
• 언제 사용하나요?
  • 종류나 분류가 같은 콘텐츠들이 대등한 위치에 있을 때 사용한다. (ex: 도시별 날씨, 이달의 베스트셀러 등)
• 어떻게 활용할까요?
  • 내비게이션 등을 넣지 않기 때문에 공간을 줄여서 더 넓게 공간을 활용 가능하다.
  • 스와이프로 화면을 넘길 수 있다는 것을 유저가 자연스럽게 알 수 있어야 한다.

3. 터치 툴 (Touch Tools)

• 유튜브, 넷플릭스처럼 동영상 스트리밍 사이트의 전채 화면 보기를 생각하면 된다.
• 유저가 화면을 터치할 경우 기능들을 보여준다.
• 언제 사용하나요?
  • 동영상이나 게임 등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
• 어떻게 활용할까요?
  • 툴들은 반투명하게 보여주는 것이 몰입감을 최대한 해치지 않는다.

4. 하단 내비게이션 (Bottom Navigation)

• 어떤 화면에서든 볼 수 있는 내비게이션을 하단에 배치한다.
• 언제 사용하나요?
  • 동영상이나 게임등 유저의 몰입감을 최대한 이끌어내야 할 때 사용한다.
• 어떻게 활용할까요?
  
  • 상단은 화면 공간에서 매우 중요한 요소이다. 그래서 아래에 내비게이션을 넣어서 중요한 내용이 들어갈 공간을 확보한다.

5. 컬렉션 (Collections)과 카드 (Cards)

• 항목을 선택할 수 있는 사진과 카드를 나열하여 선택할 수 있게 한다.
• 언제 사용하나요?
  • 복잡한 내용을 표시할 때 사용한다. 기사나 블로그 포스트 등이다.
  • 유저들의 클릭 유도를 끌기에도 좋다.
• 어떻게 활용할까요?
  
  • 섬네일을 왼쪽에, 텍스트를 오른쪽에 붙여 정렬한다.
  • 화려한 색을 사용해도 좋다. 모바일의 작은 화면에서는 화려한 색도 잘 어우러진다.

6. 무한 리스트 (Infinite List)

• 유저가 스크롤하면서 계속 새로운 콘텐츠를 보여주는 방식이다.
• 언제 사용하나요?
  • 모든 콘텐츠에 거의 적합하다.
  • 만약 콘텐츠가 많아지면 검색 기능이 유용하다.
• 어떻게 활용할까요?
  
  • 로딩이 될 때 인디케이터를 함께 사용하면 UX가 좋다.
  • 어느 정도 위치에 스크롤이 내려가면 다음 콘텐츠를 로딩한다. 굳이 모든 데이터를 다 받아올 필요는 없다.

1. Tailwind CSS?

• css 프레임워크이다.
• html 혹은 js 파일에서 className을 주는 것으로 css를 처리할 수 있다! css 파일을 옮겨 다니며 만들지 않아도 된다!

2. 어떻게 사용하나요?

1. npm install 한다.
   • npm install -D tailwindcss@latest
   • npm install -D postcss@latest
   • npm install -D autoprefixer@latest
   • nm install -D postcss-loader
     • post css에 관련한 패키지도 함께 설치하자. post css는 이전 포스팅에 있기 때문에 자세한 설명은 생략.
2. 각 config 파일들을 설정한다.

   • //postcss.config.js (파일이 없다면 만들어 쓴다)
     
     module.exports = {
     	plugins: { tailwindcss: {}, autoprefixer: {}, }
     }

   • // tailwind.config.js
     
     module.exports = {
       purge: [],
       darkMode: false, // or 'media' or 'class'
       theme: {
         extend: {},
       },
       variants: {},
       plugins: [],
     }

     • 간단하게 npx tailwindcss init 해도 된다.

   • // webpack.config.js
     
       module: {
         rules: [
           {
             test: /.jsx?$/,
             include: [path.resolve(__dirname, "src")],
             exclude: [path.resolve(__dirname, "node_modules")],
             loader: "babel-loader",
           },
           {
             test: /.css?$/,
             exclude: [],
             use: ["style-loader", "css-loader", "postcss-loader"],
           },
         ],
       },

     • 순서가 중요하다. use 부분의 가장 마지막에 넣어주자.
3. css를 적용해서 작업한다.

   • // index.css나 App.css에서 전체적으로 적용시킨다.
     
     @import "tailwindcss/base";
     @import "tailwindcss/components";
     @import "tailwindcss/utilities";

   • import React from "react";
     
     function page() {
     	<div>
         	<div className="m-15 text-red-500">
             	Hello World!
             </div>
         </div>
     }

   • className을 위의 예시처럼 정해주면 그에 맞게 바뀐 스타일을 얻을 수 있다.
   • 여기서 m은 margin, 그리고 택스트의 색을 바꿔 주었다.
   • 다양한 적용방법과 템플릿들은 공식 홈페이지에서 찾을 수 있다.

1. 문제의 발단

부트캠프 프로그램을 진행하며 페어와 만날 때 아이스 브레이크로 포지션이 어떻게 되냐는 질문을 자주 했다. 몇몇 사람들은 css가 너무 어렵고 디자인도 어떻게 해야 할지 잘 몰라서 백엔드를 지망하는 사람들도 있었다. 아마 처음 css를 배울 때 한번 접근은 쉽지만 파고들면 너무 어렵고 한 번도 해 본 적 없는 디자인에 관련한 것이라서 그렇다고 생각했다. 그렇다면 bootstrap을 이용해 쉽게 접근하고 몇 가지 좋은 결과물을 만들어 보고 접근하면 css에 대한 자신감도 붙고 더 재미있게 공부할 수 있을 것 같다는 생각에 드디어 이 포스팅을 해 보려고 한다.

2. BootStrap?

• 디자인을 도와주는 프레임워크이다. 이미 만들어진 구조를 통해 className을 이용해 적용시키면 그럴듯한 작업물을 얻을 수 있다.
• 심지어 반응형도 만들어 준다!

3. 어떻게 사용하나요?

1. 먼저 bootstrap을 다운로드한다.
   • npm install react-bootstrap bootstrap
2. css파일을 import 한다. 가장 상위의 js파일인 index.js나 App.js에 적용하면 된다.

   • import 'bootstrap/dist/css/bootstrap.min.css';

3. 필요한 컴포넌트를 import 해서 적용시켜 작업할 곳에 사용하면 된다.
   • https://react-bootstrap.github.io/components/alerts/

• 필요한 컴포넌트들을 위 사이트에서 찾아서 사용하면 된다.

• // 이렇게 Button 이라는 컴포넌트를 가져와서 바로 사용하면 된다.
  
  import 'bootstrap/dist/css/bootstrap.min.css';
  import { Button } from "react-bootstrap";
  
  function page() {
  	return (
      	<div>
          	<Button>Hi!</Button>
          </div>
      )
  }

• 위의 사이트에서 예시로 보듯이 variant 속성에 값을 주면 모양을 바꿔가며 사용할 수 있다.

매우 간단하게 적용할 수 있다.
사용하는 것은 좋지만 꼭 직접 css파일에 들어가 보고 어떤 css속성으로 만들어진 것인지를 확인하고 공부하는 것도 중요하다고 생각한다.
그리고 어느 정도 적응이 된다면 직접 만들어 보는 것도 좋은 공부가 될 것이다!
가장 중요한 것은 css의 재미를 모두가 알았으면 좋겠다.