Web Design and Development 수업 커리큘럼
Web Design and Development 수업 커리큘럼
1. 수업 철학
1.1 핵심 원칙
첫째, 이론은 개념만, 실제는 레퍼런스로 배운다.
HTML, CSS, JavaScript를 코딩하는 게 아니다. 개념만 이해하면 된다. 실제 웹사이트가 어떻게 구성되어 있는지 읽을 수 있으면 된다. 코딩은 도구가 해준다. 우리는 무엇을 만들지, 왜 만드는지에 집중한다.
둘째, 레퍼런스 수집이 실력이다.
좋은 웹사이트를 많이 보는 사람이 좋은 웹사이트를 만든다. 매주 사례를 찾고, 분석하고, 내 것으로 만든다. 디자인 관점에서, e-business 관점에서. 분석 능력이 곧 제작 능력이다.
셋째, 내 e-business 개념을 웹으로 구현한다.
남의 사이트를 따라 만드는 게 아니다. 내 아이디어, 내 비즈니스 개념을 웹으로 표현한다. 학기 끝나면 내 e-business 웹사이트가 있다. 포트폴리오가 된다.
1.2 수업 구조
[Phase 1: 이론 + 분석] [Phase 2: 개념 + 제작] 1-7주 9-14주 ↓ ↓ 웹 개념 학습 내 e-business 개발 레퍼런스 수집 웹디자인 제작 사이트 분석 노코드 구현 ↓ ↓ 8주 중간고사 15주 기말고사 (사례 분석 발표) (웹디자인 발표)1.3 교육학적 근거
사례 기반 학습 (Case-Based Learning)
추상적 이론보다 실제 사례로 배운다. 성공한 e-business 웹사이트를 분석하며 원리를 체득한다. 「왜 이 사이트가 잘 됐을까」를 고민하면 답이 보인다.
역방향 설계 (Backward Design)
최종 결과물(내 e-business 웹사이트)을 먼저 정하고, 거기서 역산한다. 「이걸 만들려면 뭘 알아야 하지?」 필요한 것만 배운다. 불필요한 이론에 시간 낭비 안 한다.
반복 노출 효과
매주 A4 한 장을 쓴다. 13번 반복한다. 웹을 보는 눈이 달라진다. 「아, 이건 이렇게 만들었구나」가 자동으로 보인다.
2. 매 수업 운영 시스템
2.1 수업 흐름 (3시간)
[5분] 데이터 입력 └─ QR → Google Form
[25분] 이론 └─ 이번 주 개념 설명 (개념만)
[10분] 시연 └─ 학생 레퍼런스로 분석 시연
[10분] 휴식
[50분] 실습 └─ 본인 레퍼런스 분석 + A4 작성
[30분] 공유 └─ 발견한 것 공유 + 피드백
[20분] 정리 └─ 핵심 요약 + 다음 주 안내2.2 매주 A4 과제
형식:
[제목] 0주차 - 주제명 / 이름
[이번 주 배운 개념]- 핵심 내용 3줄 요약
[레퍼런스 분석]- 사이트 URL- 디자인 관점 분석- e-business 관점 분석
[내 프로젝트 적용]- 내 아이디어에 어떻게 적용할지
[동영상](관련 YouTube 영상 임베드)
[구글폼](자기 평가 폼 임베드)제출: 매주 수업 전까지 LMS 제출
2.3 데이터 수집 질문 예시
| 주 | 질문 |
|---|---|
| 1 | 관심 있는 e-business 분야는? 왜? |
| 2 | 자주 방문하는 웹사이트 URL과 이유 |
| 3 | 그 사이트에서 가장 마음에 드는 디자인 요소는? |
| 4 | 그 사이트에서 클릭하고 싶게 만드는 기능은? |
| 5 | e-business 레퍼런스 3개 URL과 선정 이유 |
| 6 | 가장 분석하고 싶은 사이트 1개와 이유 |
| 9 | 내가 만들고 싶은 e-business 아이디어 |
| 10 | 내 사이트에 필요한 페이지 목록 |
| 11 | 내 사이트의 메인 컬러와 분위기 |
| 12 | 참고할 디자인 레퍼런스 3개 |
3. 도구 구성
3.1 학습 도구
| 용도 | 도구 | 비용 |
|---|---|---|
| 코드 보기 | Chrome DevTools | 무료 |
| 사이트 분석 | BuiltWith, Wappalyzer | 무료 |
| 레퍼런스 수집 | Are.na, Pinterest | 무료 |
| 와이어프레임 | Figma | 무료 |
| 웹 제작 | Framer | 무료 (2 projects) |
| 웹 제작 대체 | Webflow, Wix | 무료 (제한적) |
| AI 보조 | v0.dev, Claude | 무료 (제한적) |
3.2 운영 도구
| 용도 | 도구 |
|---|---|
| 데이터 수집 | Google Forms |
| A4 템플릿 | Google Docs |
| 과제 제출 | LMS |
| 공지/소통 | 카카오톡 채널 또는 LMS |
4. 평가 체계
4.1 배점 구조
| 항목 | 비중 | 내용 |
|---|---|---|
| 출석/참여 | 20% | Form 제출 + 수업 참여 |
| 매주 A4 | 20% | 13회 제출 (1-7주, 9-14주) |
| 중간 과제 | 25% | 사례 분석 발표 |
| 기말 과제 | 35% | 웹디자인 + 발표 |
4.2 중간 과제 (8주)
주제: e-business 사례 사이트 분석 발표
형식: 발표 7분 + Q&A 3분
내용:
- 사이트 소개 (어떤 e-business인가)
- 디자인 분석 (레이아웃, 컬러, 타이포, UX)
- e-business 분석 (수익모델, 타겟, 차별점)
- 배울 점 / 내 프로젝트에 적용할 점
제출물: 발표자료 (PDF 또는 슬라이드)
4.3 기말 과제 (15주)
주제: 내 e-business 웹디자인 발표
형식: 발표 7분 + Q&A 3분
내용:
- e-business 컨셉 소개
- 타겟 고객 및 수익 모델
- 웹사이트 시연 (실제 작동)
- 디자인 의도 설명
- 향후 발전 계획
제출물:
- 웹사이트 URL (Framer 퍼블리시)
- 발표자료 (PDF 또는 슬라이드)
- 성찰 에세이 (500자)
4.4 평가 루브릭
A4 과제:
| 등급 | 기준 |
|---|---|
| A | 개념 정확, 분석 깊이 있음, 동영상/폼 임베드 완료 |
| B | 개념 이해, 분석 기본 수준, 형식 충족 |
| C | 내용 부족하거나 형식 미충족 |
| F | 미제출 |
발표:
| 항목 | 배점 |
|---|---|
| 분석/컨셉의 깊이 | 40% |
| 디자인 완성도 | 30% |
| 발표력 | 20% |
| 시간 준수 | 10% |
5. 15주 상세 시나리오
1주차: 웹의 구조
목표: 웹이 어떻게 작동하는지 이해
이론:
- 클라이언트 vs 서버
- URL, 도메인, 호스팅 개념
- 브라우저가 하는 일
데이터 수집: 「관심 있는 e-business 분야는? 왜?」
시연:
- 학생이 제출한 관심 분야 → 관련 사이트 검색
- Chrome DevTools로 구조 살펴보기
실습:
- 좋아하는 사이트 DevTools로 열어보기
- 구조 관찰
결과물: A4 - 웹 구조 이해 + 관심 분야 정리
역량: K1
2주차: HTML 개념
목표: HTML이 무엇인지 개념 이해 (코딩 X)
이론:
- HTML = 웹의 뼈대
- 태그 구조 (head, body, div, p, img, a)
- 시맨틱 마크업이란
데이터 수집: 「자주 방문하는 웹사이트 URL 1개와 이유」
시연:
- 학생 제출 사이트 → DevTools로 HTML 구조 분석
- 「이 버튼은 이런 태그로 되어있네요」
결과물: A4 - 사이트 HTML 구조 분석
역량: K1, S1
3주차: CSS 개념
목표: CSS가 무엇인지 개념 이해 (코딩 X)
이론:
- CSS = 웹의 옷
- 색상, 폰트, 레이아웃, 여백
- 반응형 디자인 개념
데이터 수집: 「그 사이트에서 가장 마음에 드는 디자인 요소는?」
시연:
- 학생 제출 디자인 요소 → DevTools로 CSS 확인
- 「이 색상은 이렇게 지정되어 있네요」
결과물: A4 - 디자인 요소 CSS 분석
역량: K1, S1
4주차: JavaScript 개념
목표: JavaScript가 무엇인지 개념 이해 (코딩 X)
이론:
- JavaScript = 웹의 행동
- 클릭, 애니메이션, 폼 처리
- 인터랙션이란
데이터 수집: 「그 사이트에서 클릭하고 싶게 만드는 기능은?」
시연:
- 학생 제출 기능 → 어떻게 작동하는지 분석
- 「이 버튼 누르면 이런 일이 일어나요」
결과물: A4 - 인터랙션/기능 분석
역량: K1, S2
5주차: 프론트엔드 vs 백엔드
목표: 웹 개발 구조 이해
이론:
- 프론트엔드 = 눈에 보이는 것
- 백엔드 = 눈에 안 보이는 것 (서버, DB)
- API, 데이터베이스 개념
데이터 수집: 「e-business 레퍼런스 3개 URL과 선정 이유」
시연:
- 학생 레퍼런스 → 프론트/백엔드 요소 구분
- 「이 사이트는 로그인이 있으니 백엔드가 있겠죠」
결과물: A4 - 레퍼런스 3개 정리 + 프론트/백 분석
역량: K2, S1
6주차: 웹호스팅 개념
목표: 웹사이트를 어떻게 공개하는지 이해
이론:
- 호스팅이란
- 도메인 연결
- Framer, Webflow, Vercel 등 배포 방법
데이터 수집: 「가장 분석하고 싶은 사이트 1개와 이유」
시연:
- 학생 선정 사이트 → 호스팅 정보 확인 (BuiltWith)
- 중간 발표 준비 안내
결과물: A4 - 중간 발표 사이트 선정 + 분석 시작
역량: K2, S2
7주차: 사례 분석 심화
목표: 중간 발표 준비
활동:
- 디자인 관점 분석 방법
- e-business 관점 분석 방법
- 발표 구조 안내
데이터 수집: 「분석하면서 발견한 가장 흥미로운 점」
시연:
- 학생 발견 내용으로 분석 시연
- 좋은 분석 vs 나쁜 분석 비교
결과물: A4 - 분석 초안 + 발표 준비
역량: S2, A3
8주차: 중간고사
형식: 사례 분석 발표 (7분 + Q&A 3분)
발표 내용:
- 사이트 소개 (어떤 e-business인가)
- 디자인 분석 (레이아웃, 컬러, 타이포, UX)
- e-business 분석 (수익모델, 타겟, 차별점)
- 배울 점 / 내 프로젝트에 적용할 점
제출: 발표자료 (PDF)
결과물: A4 없음 - 과제 제출
역량: S3, A4
9주차: 내 e-business 컨셉 정의
목표: 기말 프로젝트 컨셉 확정
이론:
- e-business 모델 유형
- 타겟 정의
- 가치 제안
데이터 수집: 「내가 만들고 싶은 e-business 아이디어」
시연:
- 학생 아이디어 → 컨셉 정리 시연
- 비즈니스 모델 캔버스 간단 버전
결과물: A4 - e-business 컨셉 정의서
역량: K2, S3
10주차: 와이어프레임
목표: 사이트 구조 설계
이론:
- 사이트맵이란
- 와이어프레임이란
- 페이지 흐름 설계
데이터 수집: 「내 사이트에 필요한 페이지 목록」
시연:
- 학생 페이지 목록 → Figma로 와이어프레임 시연
결과물: A4 - 사이트맵 + 와이어프레임 초안
역량: S3
11주차: 디자인 1 - 메인 페이지
목표: 메인 페이지 디자인
이론:
- 히어로 섹션
- 컬러 팔레트
- 타이포그래피 선택
데이터 수집: 「내 사이트의 메인 컬러와 분위기」
시연:
- 학생 컬러/분위기 → Framer로 메인 페이지 시연
결과물: A4 - 메인 페이지 디자인 시안
역량: S3, A3
12주차: 디자인 2 - 서브 페이지
목표: 서브 페이지 디자인 + 전체 연결
이론:
- 일관성 유지
- 내비게이션 설계
- 푸터 설계
데이터 수집: 「참고할 디자인 레퍼런스 3개」
시연:
- 학생 레퍼런스 → 서브 페이지 제작 시연
결과물: A4 - 서브 페이지 디자인 시안
역량: S3, S4
13주차: 웹 제작 + AI 활용
목표: Framer로 실제 구현 + AI 맛보기
이론:
- Framer 퍼블리시
- v0.dev 소개
- AI로 컴포넌트 생성
데이터 수집: 「AI로 만들어보고 싶은 웹 요소」
시연:
- 학생 요청 → v0.dev로 컴포넌트 생성 시연
결과물: A4 - 제작 진행 상황 + AI 활용 경험
역량: S4, A3
14주차: 최종 점검 + 발표 준비
목표: 웹사이트 완성 + 발표 리허설
활동:
- 웹사이트 최종 점검
- 발표 리허설 (1인 5분)
- 동료 피드백
결과물: A4 - 최종 체크리스트 + 발표 준비
역량: S4, A4
15주차: 기말고사
형식: 내 e-business 웹디자인 발표 (7분 + Q&A 3분)
발표 내용:
- e-business 컨셉 소개
- 타겟 고객 및 수익 모델
- 웹사이트 시연 (실제 작동)
- 디자인 의도 설명
- 향후 발전 계획
제출물:
- 웹사이트 URL
- 발표자료 (PDF)
- 성찰 에세이 (500자)
결과물: A4 없음 - 과제 제출
역량: S4, A4
6. 학습목표 정리
지식 (K)
- K1: 웹 기술(HTML, CSS, JS)의 역할을 개념적으로 이해한다
- K2: 프론트엔드, 백엔드, 웹호스팅의 구조를 설명할 수 있다
기술 (S)
- S1: 웹사이트를 디자인 관점에서 분석한다
- S2: 웹사이트를 e-business 관점에서 분석한다
- S3: 노코드 도구로 웹페이지를 디자인한다
- S4: 자신의 e-business 웹사이트를 완성한다
태도 (A)
- A1: 매주 수업 활동에 적극적으로 참여한다
- A2: 과제를 성실하게 제출한다
- A3: 피드백을 반영하여 결과물을 개선한다
- A4: 결과물을 효과적으로 발표하고 소통한다
부록: 교수 체크리스트
수업 전
- Google Form 질문 준비
- QR 코드 생성
- 시연용 사이트/레퍼런스 준비
- Framer 프로젝트 준비
수업 중
- Form 응답 실시간 확인
- 학생 레퍼런스로 시연
- 실습 중 순회 피드백
- A4 작성 시간 확보
수업 후
- A4 제출 확인
- 다음 주 공지 발송
- 미제출자 리마인더
본 커리큘럼은 “레퍼런스 기반 분석 → 내 e-business 웹 구현” 모델을 기반으로 합니다.