React 반응형 UI(Responsive UI)

반응형 UI란?

다양한 기기와 화면 크기에 자동으로 적용하는 사용자 인터페이스,
디자인 접근 방식으로 이는 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서
웹사이트 또는 애플리케이션이 일관되게 보일 수 있도록 합니다.

Fluid Grid(유연한 그리드)

고정된 픽셀 기반 그리드가 아닌, 상대적인 비율이나, 백분율로 요소를 배치
이를 통해 화면 크기가 변경되거나 다른 기기에서 웹사이트를 열었을 때,
그리드는 유연하게 조정되어 콘텐츠의 배치와 비율을 최적화할 수 있습니다.

• 장점
  1. 다양한 화면의 크기에 자동으로 대응함으로 모바일, 태블릿, 데스크톱 등 다양한 디바이스에서 일관된 UI 경험을 제공합니다.
  2. 하나의 코드 베이스로 여러 화면 크기를 다룰 수 있기 때문에
     유지 보수가 용이하며, 변경이 필요한 경우
     그리드의 비율을 조정하거나 콘텐츠의 배치를 수정할 수 있습니다.
• 단점
  1. 상대적인 비율, 백분율을 사용하기 때문에 고정된 픽셀 그리드에 비해 초기 설계 단계에서 그리드 시스템 구성에서 조금 더 복잡성을 가질 수 있습니다.
  2. 일관성 유지를 위해서 디자인 요소와 콘텐츠 배치를 신중하게 조정해야 합니다.

Liquid Layout(액체 레이아웃)

화면 크기에 상대적으로 유연하게 조정되는 레이아웃을 말합니다.
픽셀이 아닌 비율과 백분율을 사용하여, 요소를 배치합니다.
Fluid Grid와의 차이점은 Fluid Grid가 그리드를 조정한다면,
Liquid Layout은 레이아웃 전체를 조정합니다.

• 장점
  1. 다양한 화면의 크기에 맞게 유연하게 조정되므로
     모바일, 태블릿, 데스크톱 등 다양한 디바이스에서
     일관된 사용자 경험을 제공합니다.
  2. 픽셀 기반 레이아웃에 비해 더 많은 콘텐츠를 표시할 수 있어
     효율적인 공간 활용이 가능합니다.
• 단점
  1. 비율을 통해 제어함으로 디자인 요소의 제어가 어려울 수 있습니다.
     예를 들어 일부 요소가 너무 커지거나 작아져
     디자인의 일관성을 유지하기 어려울 수 있습니다.
  2. 모든 디바이스에 적절한 레이아웃을 유지하기 위해
     추가적인 디자인 및 조정이 필요할 수 있습니다.

Media Query(미디어 쿼리)

CSS3에 도입된 기능으로, 미디어 유형, 화면 크기, 장치 유형 등과 같은
조건을 기반으로 CSS 스타일을 적용하거나 변경하는 데 사용됩니다.
@media 규칙을 사용하여 정의됩니다.

@media only || not screen and (min-width: 600px) {스타일 규칙}

only 키워드

특정 미디어 유형을 정확하게 지정할 때 사용됩니다.
예를 들어 only screen은 screen 미디어 유형에만 적용됨을 나타냅니다.

not 키워드

미디어 쿼리의 조건을 부정하는 데 사용됩니다.
특정 조건을 만족하지 않는 경우에 스타일을 적용하고자 할 때 유용합니다.
예를 들어 not screen은 screen 미디어 유형이 아닌 경우에 적용됩니다.

코드를 예시로 보면 아래와 같습니다.(생략 가능)

@media only screen and (max-width: 768px) {...}
// screen 미디어 유형에만 적용되며, 768px 이하 너비에서만 스타일이 적용됩니다.

@media not screen and (min-width: 1024px) {...}
// screen 미디어 유형이 아닌 경우에 적용되며, 1024px 이상의 너비에서 스타일이 적용됩니다.

주로 사용되는 미디어 유형

1. screen : 데스크톱, 노트북, 태블릿, 스마트폰과 같은 스크린 기반의 장치에 적용되며, 웹사이트 및 애플리케이션에 주로 사용됩니다.
2. print : 인쇄를 위한 스타일을 지정하는 데 사용됩니다. 웹페이지 프린트, PDF 저장 시 적용되며, 인쇄 버전에 최적화된 스타일을 적용할 수 있습니다.
3. speech : 음성 미디어 유형으로, 음성 출력 장치를 위한 스타일을 정의하는 데 사용됩니다. 기기의 웹 콘텐츠를 음성으로 전달할 수 있습니다.

주로 사용되는 미디어 속성

1. width (너비) :
   화면 또는 뷰포트의 너비를 기준으로 스타일을 적용
2. height (높이) :
   화면 또는 뷰포트의 높이를 기준으로 스타일을 적용
3. device-width (장치 너비) :
   장치의 너비를 기준으로 스타일을 적용
4. device-height (장치 높이) :
   장치의 높이를 기준으로 스타일을 적용
5. orientation (방향) :
   장치의 방향을 기준으로 스타일을 적용(가로 또는 세로).
6. aspect-ratio (화면 비율) :
   화면의 가로-세로 비율을 기준으로 스타일을 적용
7. color (색상) :
   장치가 지원하는 색상 비트 수에 따라 스타일을 적용
8. resolution (해상도) :
   화면의 해상도나 픽셀 밀도를 기준으로 스타일을 적용
9. hover (호버) :
   포인터 장치가 호버(Hover) 동작을 지원할 때 스타일을 적용
10. pointer (포인터) :
    사용자의 입력 장치가 포인터(마우스 등)인지 여부에 따라 스타일을 적용

대중적인 3단 사이즈

• 모바일 : ~767px
• 태블릿 : 768~1024px
• 데스크톱 : 1025px~

실적용 코드

적용 전

import styled from 'styled-components';
import { COLOR } from '../../styles/colors';

export const Wrapper = styled.div`
  display: flex;
  flex-direction: row;

  margin: auto;
`;

export const ViewUserArea = styled.div`
  width: 1000px;
  height: 100vh;

  box-sizing: border-box;
  background-color: #f6f6f6;

  padding: 50px 135px 50px;
`;

export const CreateUser = styled.form`
  width: 920px;
  height: 100vh;

  padding: 147px 210px 0;
  border: 1px solid blue;
  box-sizing: border-box;
`;

export const StSpan = styled.span`
  font-size: 15px;
  font-weight: bold;

  padding: 0 15px 15px;
  box-sizing: border-box;

  border-bottom: 1px solid black;
`;

export const UserHead = styled.span`
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 12px;
  font-weight: bolder;

  box-sizing: border-box;
`;

export const UserInfo = styled.div`
  width: 80px;
  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding-bottom: 15px;

  font-size: 12px;
  box-sizing: border-box;
`;

export const Wrapper_Space = styled.div`
  display: flex;
  justify-content: space-between;
`;

export const StFrom = styled.form`
  width: 500px;
  margin: 50px 210px;

  display: flex;
  flex-direction: column;
  gap: 30px;
`;

export const StH1 = styled.h1`
  width: 710px;
  font-size: 18px;
  font-weight: bolder;
  border-bottom: 1px solid black;
  padding-bottom: 15px;
  box-sizing: border-box;
  margin-bottom: 25px;
`;

export const SearchWrapper = styled.div`
  position: relative;

  .searchIcon {
    font-size: 20px;
    position: absolute;
    right: 8px;
    top: 5px;
  }
`;

export const VaildP = styled.p`
  font-size: 13px;
  color: ${COLOR.POINT_C};
  margin: -15px 0;
  font-weight: bold;
`;