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의 재미를 모두가 알았으면 좋겠다.

1. 모바일 우선주의

• 대부분의 기업들은 모바일 경험을 우선으로 설계한 후에 반응형 디자인으로 디스플레이 사이즈에 맞게 확장되는 디자인을 가지고 있다.
• 디자인 물론, 기능까지 나눠서 만들 수 있다.

2. 모바일 디자인의 어려운 점

1. 작은 화면 크기
   • 메뉴, 정보 등을 길게 보여줄 공간이 없다.
   • 부가 요소를 다 없애고, 중요한 부분만 남겨두고 나머지는 숨겨놓자.
2. 다양한 화면 너비
   • 모바일 기기들 마다도 다 사이즈가 다르다.
   • 키보드가 달려있다거나, 요즘에는 옆으로 열리거나 아예 반으로 접혀 버리는 화면도 있다.
   • 각 기기마다 모바일 버전을 다르게 만들 수 도 있고, 최대한 화면의 너비를 효율적으로 사용하는 것이 포인트가 된다.
3. 터치 스크린
   • 터치 스크린의 사이즈와 키페드의 사이즈도 생각을 해서 디자인해야 한다.
   • 그리고 링크의 사이즈도 충분히 커야한다. (안드로이드 9mm, IOS 약 8mm) 그리고 사이 간격을 조금 줘서 손가락으로도 클릭이 쉽도록 설계한다.
4. 문자 입력하기
   • 키패드의 사용을 줄일 수 있도록 하자.
   • 자동완성등의 기능을 이용할 수 있다.
5. 물리적 환경의 제약
   • 휴대폰은 꼭 지정된 장소에서 사용하지 않는다. 그래서 사용자의 물리적 환경을 생각해서 만들어야 한다.
   • 예를 들어 사용자의 환경에 따라 달라지는 빛의 정도가 달라질 수 있으므로 가독성을 더 생각한 텍스트를 만들거나, 흔들리는 버스 등의 장소에서 사용할 경우를 대비해 '팻 핑거'를 이용해 실수를 바로잡을 수 있도록 한다.
6. 사회적 영향과 집중력의 한계
   • 모바일기기는 유저가 PC 상황보다 집중을 덜 하게 된다. 다른 일을 하고 있으면서 휴대폰을 사용하는 경우가 많기 때문이다.
   • 그러므로, 사용자가 산만하다는 것을 가정하고 디자인하는 것이 도움이 된다.
   • 태스크 순서를 쉽고 빠르고, 재진입이 쉽도록 만드는 것이 포인트이다.

3. 모바일 디자인에 접근하는 방법

1. 유저의 니즈를 파악하자
   
   • 유저들의 모바일 기기를 어떨경우에 이용할까?
   • 잠깐 짬이 났을때, 빠르게 정보를 검색해야 할 때, 다른 사람들과 연결할 때 등등이다.
   • 이런 상황을 가정하고 디자인 하는 것이 중요하다. 그래서 화면을 탭 하는 횟수를 최소화하고, 가로로 콘텐츠를 배치 하기보다 세로로 배치하여 정렬하기 등을 할 수 있다.
2. 모바일 기기의 하드웨어 이용하기
   • 모바일 기기는 손쉽게 카메라, 위치 인식, 음성인식, 진동등의 기능을 사용할 수 있다.
   • 서비스의 이용에 적절하게 이용하여 더 편하게 서비스를 이용할 수 있게 만든다.