https://www.youtube.com/watch?v=Y8Y6OVIhioI

description: |-

1. 이건 꼭 알아야 한다[^1]

이 강의는 “웹 문서를 만들 때 PC 웹과 모바일 웹을 어떤 순서와 전략으로 실습(학습)할 것인가”를 안내하는 내용이다.[^4] 강의자는 과거와 달리 디바이스가 다양해진 현재의 웹 개발 환경에서, PC/모바일을 각각 따로 만들지(분리) 혹은 모바일을 먼저 만들고 화면이 커질수록 확장하는 방식(반응형/모바일 퍼스트) 중 무엇을 선택할지의 관점을 제시한 뒤, 이번 강좌의 실습 진행 순서를 공지한다.[^27][^45]

• [? 질문] 웹 문서를 만들 때, PC 웹과 모바일 웹 중 무엇을 먼저 만들고 어떤 전략으로 진행해야 하는가[^27]
  [= 답] 최근 트래픽(조회/소비)이 모바일 중심으로 커졌기 때문에 “서비스” 관점에서는 모바일부터 만들고, 이를 화면이 큰 기기(태블릿/PC)로 확장하는 모바일 퍼스트/반응형 흐름이 일반적이라는 관점을 제시한다.[^2][^3]

• [? 질문] 그런데도 왜 어떤 사이트들은 PC 웹과 모바일 웹을 여전히 따로 만드는가(양분화하는가)[^4]
  [= 답] PC와 모바일의 콘텐츠 구성 자체가 크게 다르거나, 입력 방식(터치 vs 마우스/키보드) 및 사용 맥락(작업/생산 vs 소비/열람)이 달라 분리 설계가 더 합리적인 경우가 있기 때문이라고 설명한다.[^4][^5]

• [? 질문] 이 강좌(실습)는 PC 웹과 모바일 웹을 어떤 순서로 진행하는가[^6]
  [= 답] 강의 실습은 PC 웹을 먼저 만들어 HTML과 CSS(선택자, 속성, 슈도 클래스 등) 기초를 다진 뒤, 다음 단계에서 모바일 웹을 만들며 반응형을 위한 레이아웃/그리드 시스템/가변 크기/반응형 이미지 등을 다룰 것이라고 안내한다.[^6][^7]

2. 큰 그림[^8]

이 콘텐츠는 웹 개발 실습을 시작하기에 앞서, 웹이 PC 중심에서 모바일 중심으로 이동하고 디바이스가 다변화된 배경을 설명하고, 그에 따라 실무에서 선택되는 제작 전략(분리 제작 vs 반응형/모바일 퍼스트)을 개괄한다.[^9][^2] 그 다음, 해당 강좌에서 PC 웹과 모바일 웹을 어떤 순서로 실습할지 로드맵을 제시한다.[^6][^7]

• 웹 환경의 변화: 과거엔 PC 기반 웹문서 제작이 일반적이었지만, 스마트폰 확산 이후 모바일용 페이지 필요가 커지며 “웹이 두 개”처럼 느껴지는 상황이 생겼다고 말한다.[^2][^10]
• 디바이스 다변화가 만든 과제: 태블릿 등 중간 크기 디바이스가 등장하면서 PC/모바일을 따로 만들던 방식에 “그 중간을 어떻게 할 것인가”라는 고민이 생겼다고 설명한다.[^11][^12]
• 실습 진행 로드맵 공지: 이 강좌에서는 우선 PC 웹으로 HTML/CSS의 핵심 학습을 진행한 후, 모바일 웹에서 반응형을 위한 추가 개념을 다루겠다고 예고한다.[^6][^7]

3. 하나씩 살펴보기[^13]

3.1. 실습 환경 준비 여부 확인과 “아직 할 이야기”가 남아있다는 예고[^14]

강의자는 인사 후, 지난 시간까지의 내용(문서를 만들기 위한 실습 환경 준비)을 수강생들이 완료했는지 확인한다.[^15] 준비가 끝났다면 이제 본격적으로 “문서”를 만들어야 하는데, 아직 설명해야 할 내용이 꽤 남아 있으며 향후 몇 개 강의에 걸쳐 추가로 다룰 것들이 있다고 말한다.[^16][^17] 즉, 단순히 곧바로 코딩 실습에만 들어가는 것이 아니라, 어떤 웹을 어떤 방식으로 만들지에 대한 “전략/순서”를 먼저 정리하고 간다는 흐름을 깔아둔다.[^17]

3.2. “웹은 PC 웹과 모바일 웹”이라는 구분: 과거의 전제와 변화[^18]

강의자는 우리가 흔히 “웹”이라고 부르는 대상이 크게 PC 웹과 **모바일 웹(또는 모바일 쪽)**으로 나뉜다고 말하며, 무엇을 만들지 전략을 세운 뒤 진행해야 한다고 강조한다.[^27]

이어 과거에는 PC 기반으로 웹문서를 만드는 것이 대부분이었지만, 어느 시점부터 스마트폰이 등장/확산하면서 모바일을 위한 “작은 페이지(미니 형태의 페이지)”를 만드는 필요가 생겼다고 설명한다.[^2] 그 결과, 체감상 “웹이 두 개가 되어버린” 상황이 만들어졌다고 진술한다.[^10]

[!NOTE] “웹이 두 개”라는 표현의 의도
강의자는 기술적으로 웹이 분열되었다는 의미라기보다, 제작/기획 관점에서 PC용과 모바일용을 별도로 고려해야 하는 현실을 “두 개가 됐다”라고 표현한다.[^10][^2]

3.3. 초기 대응: PC 웹과 모바일 웹을 “양옆으로 따로” 준비했던 시기(양분화)[^19]

강의자는 처음에는 PC 웹과 모바일 웹이 제공해야 할 콘텐츠가 너무 상이하다고 느껴, 모바일용을 따로 준비하는 방식으로 접근했으며, 결과적으로 두 개가 양분화되어 있었다고 말한다.[^20][^21]
이 대목은 많은 서비스가 한동안 “PC 버전 사이트”와 “모바일 버전 사이트”를 별개로 운영해왔던 역사적 흐름을 설명하는 구간이며, 강의자는 본인의 경험을 바탕으로 당시의 자연스러운 선택이 “분리 제작”이었다고 회고한다.[^21]

3.4. 문제의 등장: 태블릿 등 “중간 크기” 디바이스의 확산이 가져온 설계 난이도 상승[^22]

이후 상황이 바뀌는데, 강의자는 “중간”에 해당하는 다양한 디바이스가 등장하기 시작했다고 말한다.[^11] 예로 태블릿 등을 언급하며, 화면 크기가 여러 단계로 다양해지면서 다음과 같은 문제가 생긴다고 설명한다.[^11][^12]

• 기존처럼 PC 웹과 모바일 웹을 따로 만들었을 때,
  • [? 질문] 그 사이에 있는 태블릿(혹은 기타 크기)을 위한 화면은 어떻게 구현할 것인가[^12]
    [= 답] 별도로 또 만들 것인지, 아니면 기존 설계를 확장/조정할 것인지라는 고민이 생긴다.[^12][^23]

강의자는 이런 변화로 인해 “웹문서를 만드는 것” 자체에 여러 고민거리가 생기기 시작했다고 말하며, 디바이스 스펙트럼의 확장(작은 폰 → 큰 폰 → 태블릿 → 데스크톱 등)이 과거의 이분법(PC vs 모바일)만으로는 다루기 어려운 상황을 만들었다는 점을 강조한다.[^23][^11]

3.5. 최근의 정리 방향(관점 제시): 모바일 트래픽 증가와 모바일 퍼스트 흐름[^24]

강의자는 “요즘에 정리가 되어가고 있는 것 같다”고 말하며, 최근의 흐름을 설명한다.[^25] 핵심 논지는 다음의 연쇄로 전개된다.

1. 웹문서는 “사용자들이 보는 것”이기 때문에 조회수/트래픽 양을 무시할 수 없다.[^26]
2. PC로 소비되는 트래픽보다 모바일 폰을 통해 소비되는 트래픽이 매우 커지고 있다고 말한다.[^3]
3. 따라서 어떤 서비스를 만들 때 PC 기반만으로 웹을 만들면, 결과적으로 “트래픽이 적은” 쪽만을 대상으로 하는 셈이 될 수 있다고 주장한다.[^27][^28]

이를 바탕으로 강의자는:

• [? 질문] 서비스를 만들겠다면 어디부터 시작하는 것이 자연스러운가[^29]
  [= 답] 모바일 웹부터 시작하는 형태가 요즘의 방향이라고 설명한다.[^29][^30]

여기서 강의자는 “모바일을 하나 만들어놓고, 그 다음 태블릿이나 더 큰 화면을 어떻게 할지”를 생각한다고 말하며, 화면이 커지는 방향은 이미 예측 가능하니(“사이즈가 커지는 것”), 모바일에서 만든 것을 큰 화면에서도 반응하도록 조금씩 모양을 바꾸어 대응하게 만들면 된다는 관점을 제시한다.[^30][^31]

[!IMPORTANT] 강의자가 제시하는 제작 사고방식(순서)
먼저 모바일을 기준으로 구현하고, 화면이 큰 디바이스에 맞춰 점진적으로 확장/조정하는 접근이 자연스럽다는 문제의식을 제시한다.[^30][^31]

3.6. “반응형 웹”의 위치: 모바일을 먼저 만들고 크게 반응시키는 방식[^32]

강의자는 방금 설명한 흐름을 정리하며, 다음과 같이 개념을 연결한다.[^33]

• [? 질문] 모바일을 먼저 만들고, 이를 큰 화면에 맞춰 반응하게 만드는 형태의 웹문서 제작을 무엇이라고 보는가[^34]
  [= 답] 그것이 곧 반응형 웹을 만드는 것이라고 설명한다.[^34][^35]

그리고 “모바일을 만들겠다는 뜻”을 다시 한번 풀어 말한다. 즉, 모바일을 먼저 만들어 놓고 그것을 반응하게 하겠다는 것이 반응형 접근의 핵심이라는 식으로 재진술한다.[^35]

3.7. 현실의 예외: 여전히 “모바일 웹과 PC 웹을 따로” 만드는 사이트가 많은 이유[^36]

강의자는 실제로 많은 사이트에서 모바일 웹과 PC 웹을 따로 만드는 경우도 많다고 말하며, 그 이유는 여러 가지가 있을 것이라고 전제한다.[^37][^38]

이어서 대표적인 이유를 예시로 든다.

3.7.1. 콘텐츠가 너무 다를 때: PC는 많이 보여주고, 모바일은 간략히 보여주는 전략[^39]

강의자는 PC 웹과 모바일 웹이 갖고 있는 콘텐츠가 너무 다르면 분리할 수 있다고 말한다.[^4]
예를 들어:

• PC에서는 “여러 사실(여러 정보/여러 요소)”을 보여주지만
• 모바일에서는 몇 개만 간략하게 보여주는 형태라면
  콘텐츠 자체를 “자르거나(축약)”하는 방향으로 양분화가 일어날 수 있다는 취지로 설명한다.[^4]

+++ 상세 예시 강의자의 표현을 구조화하면 다음과 같은 상황을 가리킨다.[^4]

• PC 홈: 다양한 모듈(뉴스/추천/광고/랭킹/카테고리/부가정보)을 한 화면에 다량 배치
• 모바일 홈: 스크롤/가독성/속도 등을 이유로 핵심 모듈만 최소 구성
  이 경우 “같은 사이트”라도 제공 정보량과 정보 구조가 달라져, 단일 반응형으로 맞추기보다 별도 설계가 더 쉽거나 적합할 수 있다는 맥락이다.[^4] +++

3.7.2. 입력 방식·사용 맥락이 다를 때: 터치(손가락) vs 마우스/키보드[^40]

강의자는 PC와 모바일은 입력도구가 다르다고 말한다.[^5]

• 모바일은 손가락 기반의 터치
• PC는 마우스와 키보드

이 차이 때문에, 어떤 쪽은 “작업(생산/편집/입력)”에 적합하고 다른 쪽은 “소비(열람)”에 더 맞는 등, 용도에 따라 경험 설계를 분리할 수 있다는 취지로 설명한다.[^5][^41]

강의자는 예로 “작업용”이면 PC 쪽이 더 좋고(마우스/키보드), “소비”는 모바일로 가는 양분화 형태가 가능하다는 뉘앙스로 말한다.[^41]

3.8. 정리: 작업환경으로서의 PC 웹, 소비형 서비스로서의 모바일 퍼스트[^42]

앞의 논의를 정리하며 강의자는:

• PC는 기본적으로 마우스/키보드 기반이고 “작업환경”으로서 계속 갈 것 같다고 말한다.[^43]
• 소비형 웹/서비스는 모바일 퍼스트로 갈 것 같다고 말한다.[^44]

동시에 “여러분들이 만들 웹의 형태가 모바일로만 가는 것은 아니고, 두 가지가 아직까지 공존한다”고 덧붙인다.[^45] 즉, 모바일 퍼스트 흐름이 강해졌더라도 PC 웹이 사라지는 것이 아니라, 목적과 맥락에 따라 여전히 병존하며 전략적으로 선택해야 한다는 입장이다.[^45][^43]

3.9. 이번 강좌의 실습 순서 공지: PC 웹 먼저 → 이후 모바일/반응형 개념으로 확장[^46]

강의자는 “이제 두 가지 웹을 만들어 볼 것”이라고 말하며, 구체적인 실습 순서를 안내한다.[^46]

1. 첫 번째: PC 웹부터 실습한다.[^6]
   여기서 “HTML 하는 것을 만들어보고”라고 말하며, 우선 PC 웹을 기반으로 웹문서 제작의 기본 골격을 잡는다는 흐름을 제시한다.[^6]

2. PC 웹과의 “커다란 차이”로 CSS를 언급한다.[^47]
   강의자는 CSS를 배우기 위해:

   • 셀렉터(선택자)[^6]
   • CSS 속성(표현은 다소 왜곡되어 있으나 ‘속성’ 학습을 지칭)[^6]
   • 슈도 클래스(pseudo-class)[^6] 등을 이야기하게 될 것이라고 예고한다.[^6]

3. 그 이후, “모바일”을 가지고 웹을 한 번 더 만들어보며, 그때는 반응형을 위한 요소들을 학습한다고 말한다.[^7] 강의자가 열거한 항목은 다음과 같다.[^7]

   • “레이아웃”에 해당하는 추가 고려(문맥상 반응형 레이아웃)[^7]
   • 그리드 시스템[^7]
   • 가변 크기(유동적인 사이즈/단위 운용)[^7]
   • 반응형 이미지[^7]

즉, 커리큘럼 관점에서는 “모바일 퍼스트가 대세”라는 문제의식을 소개하면서도, 학습(실습) 흐름은 PC 웹 → CSS 기초 → 모바일/반응형 확장의 순서로 설계되어 있음을 분명히 한다.[^6][^7]

3.10. 다음 강의 예고: 실습 파일 준비[^48]

마지막으로 강의자는 다음 주(다음 강의)에 실습을 위한 파일들을 준비하겠다고 안내하고, 시청에 대한 인사를 전하며 마무리한다.[^49][^50]

4. 핵심 통찰[^51]

1. 웹 제작 전략은 “PC vs 모바일”의 이분법이 아니라, 트래픽/사용 맥락/디바이스 스펙트럼을 함께 고려하는 의사결정 문제로 다뤄진다.[^26][^11]
2. “모바일 퍼스트/반응형”은 단지 유행이 아니라, 모바일 트래픽이 커졌고 화면 크기가 연속적인 스펙트럼이 되면서 생긴 실무적 해법으로 제시된다.[^3][^31]
3. 그럼에도 분리 제작(PC/모바일 별도)은 콘텐츠 차이와 입력 방식 차이가 큰 서비스에서 여전히 현실적인 선택지로 남는다.[^4][^5]
4. 학습 커리큘럼은 실무 트렌드와 별개로, 기초를 쌓기 위해 PC 웹에서 HTML/CSS 기초를 먼저 익힌 뒤 모바일/반응형을 확장하는 순서로 진행될 수 있음을 보여준다.[^6][^7]

• 실행 관점에서의 행동 항목(강의자가 암시하는 학습자의 다음 단계)
  • PC 웹 실습을 통해 HTML 구조와 CSS 선택자/슈도 클래스 등 기본 문법을 먼저 숙달한다.[^6]
  • 이후 모바일 실습에서 그리드/가변 크기/반응형 이미지 등 확장 개념으로 “크기 변화에 대응하는 설계”를 연습한다.[^7]
  • 프로젝트 성격이 “작업/생산” 중심인지 “소비/열람” 중심인지에 따라 PC/모바일 분리 여부를 판단하는 관점을 가져본다.[^41][^44]

5. 헷갈리는 용어 정리[^52]

PC 웹: 데스크톱/노트북 등 PC 환경에서 소비·작업되는 웹 화면/웹문서 맥락을 지칭한다.[^2]
모바일 웹: 스마트폰(모바일 폰)에서 소비되는 웹 화면/웹문서 맥락을 지칭한다.[^2]
트래픽(양): 사용자가 웹문서를 소비하며 발생시키는 조회/데이터 이용 규모로, 서비스 전략에서 무시하기 어렵다고 설명한다.[^26]
반응형 웹: 모바일을 먼저 만들고, 더 큰 화면(태블릿/큰 화면)으로 갈수록 레이아웃/모양을 조정해 “반응”하도록 만드는 제작 방식으로 설명된다.[^34][^35]
셀렉터(선택자): CSS 학습의 주요 주제로 예고되며, 스타일 적용 대상을 지정하는 문법을 의미한다.[^6]
슈도 클래스(pseudo-class): CSS 학습 항목으로 예고되며, 특정 상태/조건에서의 스타일링을 위한 선택자 확장을 의미한다.[^6]
그리드 시스템: 모바일/반응형 파트에서 다룰 항목으로 예고되며, 화면 구성(레이아웃)을 체계적으로 나누는 방식으로 언급된다.[^7]
가변 크기: 모바일/반응형 파트에서 다룰 항목으로 예고되며, 화면 크기에 따라 요소 크기가 유동적으로 변하도록 설계하는 개념으로 언급된다.[^7]
반응형 이미지: 모바일/반응형 파트에서 다룰 항목으로 예고되며, 기기/화면 크기에 맞게 이미지가 적절히 표시되도록 하는 기법을 뜻한다.[^7]

---

참고(콘텐츠 정보)[^53]

• 제목: 프론트엔드, 백엔드 개발자를 위한 HTML, CSS 강의 11강 - PC웹과 모바일 웹의 실습순서 안내[^53]
• 채널: 뉴렉처[^53]
• 길이: 5분 29초[^53]
• 링크: https://www.youtube.com/watch?v=Y8Y6OVIhioI[^53]

[^1]: @[00:01] “안녕하세요… 반갑습니다” [^2]: @[00:39] “과거에는 pc… 언제부턴지 모바일… 스마트폰… 필요성을 느끼게 됐죠” [^3]: @[02:06] “모바일 폰을 통해서 소비하는 트래핑 양이 어마어마하게…” [^4]: @[03:36] “pc 웹과 모바일… 컨텐츠가 너무 달라서… pc… 여러… 모바일… 몇 개 간략… 양분…” [^5]: @[03:51] “pc… 입력도… 모바일… 손가락… 터치… pc… 마우스… 키보드…” [^6]: @[04:53] “첫번째는… pc… html… css… 셀렉터… 슈도 클래스…” [^7]: @[05:12] “모바일… 반응형… 레이아웃… 그리드 시스템… 가변크기… 반응형 이미지…” [^8]: @[00:27] “우리는 웹이라고 하면 크게… pc… 모바일…” [^9]: @[00:03] “문서를 만들기 위한… 실습 환경을 준비…” [^10]: @[00:48] “그래서 웹이 두 개가 되 버린 거예요” [^11]: @[01:14] “요즘에는… 다양한 디바이스… 태블릿…” [^12]: @[01:22] “pc 웹과 모바일을 만들었었는데… 타블렛… 어떻게 구현할 것인가” [^13]: @[00:13] “향후 몇 개 강의를 통해서…” [^14]: @[00:03] “지난 시간을 통해… 실습 환경…” [^15]: @[00:03] “준비 하셨는지 모르겠네요” [^16]: @[00:11] “이제부터… 문서를 만들어야… 할 얘기… 많이 남아” [^17]: @[00:13] “향후 몇 개 강의를 통해서…” [^18]: @[00:27] “웹… pc… 모바일…” [^19]: @[00:59] “처음에는… 컨텐츠가 너무 상의…” [^20]: @[01:07] “모바일 양옆을 따로 준비…” [^21]: @[01:13] “두 개가 이렇게 양분화…” [^22]: @[01:20] “여러가지 다양한 크기의 웹이 등장…” [^23]: @[01:35] “그러면서… 여러가지… 고민거리가 생길…” [^24]: @[01:41] “요즘에 정리가 되어가고…” [^25]: @[01:41] “그러다가 이제 요즘에…” [^26]: @[01:51] “웹문서… 사용자들이 보는… 조회수… 트래픽 양… 무시할 수가 없는데요” [^27]: @[02:22] “pc… 기반… 랩을 하게 되면… 트래픽… 적게…” [^28]: @[02:22] “트랙 팽 냥을 굉장히 적게…” [^29]: @[02:27] “서비스를 만들겠다고… 모바일웹부터 시작…” [^30]: @[02:37] “모바일… 만들어놓고… 태블릿… 커다란… 어떻게…” [^31]: @[02:58] “사이즈 큰… 반응… 모양을… 바꿔서 반응할 수 있게끔…” [^32]: @[03:03] “이제 얘기하는 것은…” [^33]: @[03:05] “일단 모바일 만들어서 이것을 크게… 반응…” [^34]: @[03:10] “그럼 우리가 반응형 웹을 만드는 거구요” [^35]: @[03:15] “모바일… 먼저 만들어 놓고… 반응…” [^36]: @[03:19] “실제로 보면은 많은 사이트… 모바일… pc… 따로” [^37]: @[03:28] “따로 만드는 경우도 많아요” [^38]: @[03:30] “이유가 여러가지…” [^39]: @[03:36] “pc… 여러… 모바일… 간략…” [^40]: @[03:56] “모발… 손가락… pc… 마우스… 키보드…” [^41]: @[04:09] “작업용… pc… 소비하면… 모바일로…” [^42]: @[04:26] “작업환경으로서…” [^43]: @[04:28] “작업환경으로서… pc 웹을 계속할 것 같구요” [^44]: @[04:33] “소비용… 웹은 모바일 퍼스트…” [^45]: @[04:37] “모바일로만… 아니고 두 가지… 공존…” [^46]: @[04:46] “두가지 웹을 만들어 볼 건데요” [^47]: @[05:00] “커다란 차이… css 인데…” [^48]: @[05:24] “다음 주에 실습을 위한 파일들을 준비…” [^49]: @[05:24] “준비하도록 하겠습니다” [^50]: @[05:27] “다음 시간에…” [^51]: @[02:03] “pc… 소비… 모바일… 소비…” [^52]: @[05:12] “그리드 시스템… 가변크기… 반응형 이미지…” [^53]: “프론트엔드, 백엔드 개발자를 위한 HTML, CSS 강의 11강 - PC웹과 모바일 웹의 실습순서 안내 / 채널: 뉴렉처 / 길이: 5분 29초 / https://www.youtube.com/watch?v=Y8Y6OVIhioI”