{"componentChunkName":"component---src-templates-blog-post-js","path":"/etc/반응형-웹-기획-디자인-개발/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"811c70b4-8b9e-522d-9489-ef4c15b51a4c","excerpt":"프로젝트 킥오프 가이드 반응형 웹 디자인 반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC…","html":"

\"프로젝트

\n

반응형 웹 디자인

\n

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영된다. 반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)이다. 반대말은 디바이스 별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.

\n

반응형 웹

\n

미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드로 화면 크기의 변화에 따라 그에 맞게 화면에 표시 된다.

\n

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 그러나, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야하니 데이터를 낭비하고 로딩시간을 늘리는 단점을 가진다.

\n

적응형 웹

\n

서버나 클라이언트에서 웹에 접근한 디바이스를 체크하여 그 다바이스에 최적화된 마크업을 호출한다. 적응형 웹의 특징으로는 기존의 사이트를 재구축할 필요가 없고 다양한 디바이스에 최적의 성능을 가져올 수 있다.

\n

기존에 이미 데스크톱용 템플릿을 작성했따면 처음부터 재구축할 필요없이 다른 기기용 템플릿만 따로 만들면 된다. 또한 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드하므로 데이터 낭비가 적고 로딩 속도가 빠르다는 장점이 있다.. 다만, 각 기기별로 별도의 템플릿을 작성해야하므로 개발이 복잡해진다는 단점이 있다.

\n

기획

\n
    \n
  1. 우선순위 관점 정의
    2. \n
  2. 가변 단계 정의
    3. \n
  3. UI 구성 요소 정의
    4. \n
\n

우선순위 관점 정의

\n

Mobile-First

\n

콘텐츠의 양이 적으며 방문하는 사용자가 대체적으로 모바일 위주의 다비이스를 사용할경우

\n

PC-First

\n

콘텐츠의 양이 많으며 방문하는 사용자가 PC위주의 디바이스를 사용할경우

\n

가변 단계 정의

\n

지원할 디바이스 사이즈의 범위를 정하고 그에 따른 가변단계를 정의 하는단계, 이러한 가변 단계를 정의할때는 형태 출시되어 있는 디바이스 뿐 아니라 향 후 출시 될 디바이스에 대해서도 고려할 필요가 있다.

\n

이 단계에서는 반응형 경계치(Responsive Breakpoints)를 위주로 가변의 단계를 정의하면 된다.

\n

가변 단계 정의 예시

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NikeBootstrap
640px 이하 : 스마트폰480px 이하 : 스마트폰
768px ~ 960px : 테블릿481px ~ 767px : 스마트폰 부터 테블릿
1024px ~ 1420px : 기본768px ~ 979px : 테블릿 세로
1920px 이상 : 큰화면980px ~ 1199px : 기본
1200px 이상 : 큰 화면
\n

UI 구성 요소 정의

\n\n

파트별 역할

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
기획디자인개발
가변 단계 정의반응형 Font 사이즈 정의반응형 스타일 정의
UI 구성 요소 정의그리드 정의UI 컴포넌트 개발
지원 해상도 정의아이콘 정의반응형 테스트 환경 구축
해상도별 타겟 디바이스 정의프리뷰 제공 ( 미리보기 )
\n","tableOfContents":"","wordCount":{"words":351},"fields":{"slug":"/etc/반응형-웹-기획-디자인-개발/","image":"/assets/kickoff-meeting.png","faq":[]},"frontmatter":{"title":"반응형 웹 기획, 디자인, 개발","date":"2022년 2월 12일","dateISO":"2022-02-12T17:58:59.354Z","updatedISO":null,"category":"etc","description":"반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다. 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다.","tags":["반응형 웹","디자인","UI컴포넌트","적응형 웹"]}}},"pageContext":{"slug":"/etc/반응형-웹-기획-디자인-개발/","previous":{"fields":{"slug":"/etc/flutter-and-react-native/"},"frontmatter":{"title":"Flutter, React Native","tags":["flutter","reactnative","dart","javascript","크로스플랫폼이"]}},"next":{"fields":{"slug":"/ai/AI-Agent-프레임워크-비교-AutoGPT-vs-CrewAI-vs-LangGraph-실전-가이드/"},"frontmatter":{"title":"AI Agent 프레임워크 비교 - AutoGPT vs CrewAI vs LangGraph 실전 가이드","tags":["AI Agent","AutoGPT","CrewAI","LangGraph","프레임워크","에이전트","Agent","AI","LLM"]}}}},"staticQueryHashes":["213619243","3262363727"]}