본문바로가기

웹 디자인 &
웹 퍼블리싱 스페셜리스트

디자인 프로젝트 실습 반응형 웹 제작 11주/32강

다양한 웹 디자인의 트렌드를 기반으로 한 웹 퍼블리싱 기술을 프로젝트 기반으로 학습하여 반응형 웹을 제작합니다.

수강신청 수강신청
웹디자인 및 퍼블리셔
교육일정
2020.10.19 - 2020.12.30
교육시간
월, 수, 금 / 10:00 - 13:00
교육장소
아카데미정글 (강남 신사)
수 강 료
총 180만원 / 월 60만원
(3개월 월별납부,
4개월 후불제 가능)
준 비 물
개인 노트북(권장)

디자인부터 퍼블리싱까지,
인터랙티브한
반응형 웹 사이트

제작하는 과정

웹 디자인 트렌드와 웹 퍼블리싱 기술을 학습 하며, 비즈니스 목표에 따른, 프로젝트 중심의 실습을 통해 직접 디자인하고 코딩한 반응형 웹사이트를 제작합니다.

  • WEB
    DESIGN
  • WEB
    PUBLISHING

웹 디자인, 웹 퍼블리싱을 함께 배워
본인만의 작업물을 제작합니다.

웹 디자인, 웹 퍼블리싱의 기초부터 차근차근 학습을 통해 웹 디자인 프로젝트, 웹 퍼블리싱 프로젝트 과정을 거쳐 강사님의 피드백을 통해 나만의 작업물을 제작합니다.

디자인 작업물 이미지

수업 학습 내용

  • WEB
    DESIGN

    실무 사례를 실제로 따라 만들어보면서
    왜 이런 디자인을 하였는지
    논리적으로 추적하며 디자인을 배웁니다.

    - 디자인 프로세스를 바탕으로한 디자인 기획을 통해 웹디자인을 하는 방법론을 배웁니다.

    - 디자인 가이드라인/디자인 시스템을 통해 디자인 하는 방법을 학습합니다.

    - 웹디자인을 하는데 있어 기본적으로 알아야할 시각 요소(컬러, 그리드, 타이포그래피, 레이아웃, 아이콘)에 대한 이론을 바탕으로 디자인을 실습 합니다.

  • WEB
    PUBLISHING

    실제로 서비스 되고 있는 사이트의 기술
    분석을 하고, 각각의 필요한 실무
    기술을 학습합니다.

    - 웹표준, 웹접근성, 크로스브라우징의 기술을 학습하고 하드코딩하는 법을 배웁니다.

    - 웹문서의 뼈대를 이루는 HTML5, 디자인 및 스타일을 잡아주는 CSS3를 다양한 사례로 배웁니다.

    - 인터랙티브 영역을 담당하는 Javascript의 기본 문법을 바탕으로 jQuery를 이해하고 활용하는 방법을 배웁니다.

  • DOMAIN &
    WEB HOSTING

    호스팅 서비스(도메인 서비스), 웹 접근성 &
    웹 표준 점검 및 검색엔진 최적화(SEO)에 대하여 학습합니다.

    - 도메인호스팅 개념을 학습하며 FTP를 통해 파일을 업로드 하는 방법, SSL(보안서버) 설정 등을 배웁니다.

    - Markup Validation Service 사이트를 통한 마크업 검사, CSS Validation Service 사이트를 통한 CSS 검사를 학습합니다.

    - 구글 SEO 체크 리스트를 점검하며 구글과 네이버 검색 엔진 최적화 및 사이트 정보 등록에 관하여 학습합니다.

  • PORTFOLIO
    PROJECT

    실제 프로젝트를 분석하고 재해석하여
    실무로만 배울 수 있는 것들을
    프로젝트 수업으로 배울 수 있습니다.

    - 웹 디자인 및 퍼블리싱에 필요한 요소들을 프로젝트를 통하여 습득합니다.

    - 웹 디자인을 하는데 있어 기본적으로 알아야 할 요소를 학습하고, 다양한 디자인 실습을 통해 본인 작품을 제작 합니다.

    - 웹 표준, 웹 접근성을 기반으로 실무에서 요구 되는 기술 및 반응형 웹 학습을 통해 본인 작품을 제작합니다.

이런분이
수강하기에 좋습니다.

  • 트렌디한 디자이너 &
    웹퍼블리셔가
    되고 싶은 분

    웹 디자인의 트렌드와 퍼블리싱 기술을 꼼꼼하고 제대로 학습 할 수 있습니다.

  • 논리적 디자인을 하고
    커뮤니케이션을
    하고 싶은 분

    문제 정의를 통해 논리적 디자인 및 디자인 방법론을 통한 디자인 법을 학습합니다.

  • 실무형 반응형
    웹 사이트를
    만들고 싶은 분

    도메인 및 호스팅까지 진행하여 실제적인 포트폴리오를 제작 합니다.

  • 웹의 다양한 트렌드
    기술을 배워 실습 위주의
    경험을 하고 싶은 분

    다양한 웹 트렌드를 살펴보고 실무적인 퍼블리싱 기술을 학습합니다.

CURRICULUM

  1. PART 01 WEB DESIGN

    • 01강
      • 프로젝트 Overview
      • 1. 추천 사이트 및 레퍼런스 가이드
      • 2. 프로젝트 Brief 작성 : Project Overview
      • 3. 프로젝트 목표 및 문제 발견 : Project Goal
      • 4. Research 방법 & 실습 _ 사용자, 경쟁사, 콘텐츠
      • 5. 1차 Reference 조사 분석
    • 02강
      • IDEATION
      • 1. 기초데이터 수집 및 콘텐츠 구성
      • 2. 콘텐츠 수집 및 내용 분석
      • 3. 기초 정보 구성 설계 - 콘텐츠 분석 및 적용
      • 4. 차별화 전략 수립 - 차별화 전략과 아이덴티티 수립
      • 5. 2차 Reference 조사 분석
        - 차별화 전략을 통한 2차 레퍼런스 조사
      • 6. Ideation & 아이디어 스케치
      • 7. 마인드맵, 어피티니 다이어그램, 강제 연결법 등
    • 03강
      • 컨셉 도출
      • 1. 제작 및 컨셉방향 수립
        - Ideation을 통한 컨셉 방향 수립
      • 2. 컨셉 도출(무드보드) - 레퍼런스를 통한 컨셉 시각화
      • 3. Tone & Mannnner
        - 컬러 이미지맵(형용사) 등을 통한 컬러 가이드
      • 4. 정보구조설계(IA Information Architecture)
        - 사이트맵 작성
      • 5. 와이어프레임 & UI 개발(인터랙션 설계)
    • 04강

      프로토타입 제작

      - 프로토타입 제작(UI설계&인터랙션)

    • 05강
      • 디자인과 레이아웃 1
      • 1. 웹사이트 서체 운영 이해
        - 자간, 행간, 타이포 시스템의 이해
        - 시스템 폰트, 이미지 폰트, 웹폰트
      • 2. 비주얼요소 디자인 제작
        - 메인 이미지, 배너 제작
      • 3. 디자인 구성 요소의 이해와 제작
        - 노리적 분석을 통한 콘텐츠 구조화 디자인 하기
        - 그룹화 요소의 이해, 레이아웃의 이해
      • 4. 여백과 그리드, 아이콘 소스 활용 및 제작
    • 06강
      • 디자인과 레이아웃 2
      • 1. 웹 화면과 반응형 사이트의 레이아웃 이해
      • 2. 사용자와 레이아웃의 이해
      • 3. F레이아웃과 Z레이아웃의 이해(아이트래킹)
      • 4. 스크롤 이벤트와 패럴렉스의 이해
      • 5. 반응형 & 모바일 디자인
        - 가변크기와 고정크기의 이해
      • 6. 미디어쿼리에 의한 레이아웃의 변화 이해
      • 7. 디바이스별 해상도 이해
    • 07강
      • 디자인과 레이아웃 3
      • 1. 논리 픽셀과 물리 픽셀의 이해
      • 2. 배율 디자인과 반응형 레이아웃의 이해
      • 3. 마이크로 인터랙션의 이해
      • 4. 디자인 스타일 가이드(style-tiles), 가이드의 개념과 필요성
      • 5. 컬러, 타이포그라피, 이미지, 패턴 시스템
      • 6. 디자인 스타일 가이드(style-tiles) 작성
  2. PART 02WEB DESIGN PROJECT

    • 08강

      반응형 웹사이트 개인 포트폴리오 디자인 제작 1

    • 09강

      반응형 웹사이트 개인 포트폴리오 디자인 제작 2

    • 10강

      반응형 웹사이트 개인 포트폴리오 디자인 제작 3

    • 11강

      반응형 웹사이트 개인 포트폴리오 디자인 제작 4

  3. PART 03 WEB PUBLISHING

    • 12강
      • HTML 기초 1
      • 1. 웹 서비스와 호스팅의 이해 및 호스팅 서비스 신청
        - 도메인, 서버, 클라이언트 개념
      • 2. HTML 기본: HTML 개념과 기초 문법
      • 3. HTML 기본 문서 구조, 호스팅과 서버의 이해
      • 4. 시멘틱 구조 & 태그 개념 이해
      • 5. 웹 접근성을 위한 시멘틱 웹과 시멘틱 태그,
      • 6. 제목 태그와 title 태그, meta 태그, alt 속성
    • 13강
      • HTML 기초 2
      • 1. 비주얼스튜디오 코드 설치 & 확장팩 설치
      • 2. 디자인을 위한 크롬 확장팩 설치
      • 3. 텍스트 관련 태그들
      • 4. 이미지와 하이퍼링크
        - 다양한 이미지의 활용 및 이해: png, jpg, gif, svg
      • 5. 특수기호, 더미텍스트, 아이콘의 활용
      • 6. 파비콘 등록하기
      • 7. 텍스트 관련 태그들, 목록과 표
      • 8. 블럭레벨과 인라인 레벨 요소
        - 단락스타일, 문자스타일
        - 다양한 태그 개념과 이해
    • 14강
      • CSS 기초 1
      • 1. CSS 개념과 기초 문법, CSS 외부 파일 연동
      • 2. 주요 선택자의 이해 - tag, id, class
      • 3. 글꼴 관련 스타일
        - 서체 속성과 적용(텍스트, 문단, 목록)
    • 15강
      • CSS 기초 2
      • 1. 글꼴 관련 스타일
        - 서체의 고정 단위와 상대적 단위의 이해
        (px, pt, em, rem),
      • 2. 웹폰트와 구글 웹폰트 적용
      • 3. 색상과 배경을 위한 스타일
        - 웹에서 컬러의 표현, 그레디언트 적용,
        - 색상 관련 다양한 사이트의 활용
      • 4. 폼관련 태그들 - input 태그의 다양한 속성
      • 5. CSS 박스 모델의 이해, 테두리와 여백의 이해
    • 16강
      • CSS 포지셔닝 1
      • 1. 다양한 배경 이미지의 활용
      • 2. 다양한 선택자 이해
        - 블럭 레벨과 인라인 레벨의 이해와 활용, 중앙 정렬 활용
      • 3. float 레이아웃 정렬 하기
      • 4. 가변 그리드의 이해
      • 5. position
      • 6. 절대적 위치, 상대적 위치, 고정위치
    • 17강
      • CSS 포지셔닝 2
      • 1. float, position의 개념과 활용
      • 2. 플렉스 박스
      • 3. 그리드
      • 4. 미디어쿼리
      • 5. 반응형 구현 개념
      • 6. CSS 레이아웃의 이해
        - 다단 레이아웃의 이해, 표 스타일과 속성 이해
    • 18강
      • UI 개발 기초 1
      • 1. CSS 의 다양한 활용
        - 고스트 버튼, 햄버거 버튼, 그라디언트 배경
      • 2. CSS 레이아웃의 이해
        - 그리드의 컬럼 시스템 이해와 활용
      • 3. CSS display 다양한 속성 이해와 활용
        - opacity와 display none 이해와 활용
      • 4. CSS 수직 중앙 정렬의 다양한 방법
      • 5. CSS 마우스 hover 디자인 적용
    • 19강
      • UI 개발 기초 2
      • 1. 웹과 멀티미디어 - 오디오와 비디오
      • 2. 다양한 선택자의 이해
        - 연결 선택자, 속성 선택자, 가상 선택자와 가상 요소
      • 3. CSS를 통한 애니메이션 구현
        - transform, transition, animation
      • 4. CSS의 다양한 활용
        - CSS로 삼각형, 햄버거 버튼 제작
      • 5. CSS 레이아웃의 이해
        - 가변크기와 고정 크기의 이해
    • 20강
      • UI 개발 기초 3
      • 1. CSS 우선 순위와 초기화 코드 사용의 개념과 활용
      • 2. CSS 레이아웃의 이해
        - 디자인 가이드를 통한 스타일 가이드 적용
      • 3. HTTP 요청 횟수를 줄이기 위한
        스프라이트 이미지의 이해와 활용
      • 4. 작업의 효율성을 위한 html include
      • 5. 크로스 브라우징의 이해
        - browser support와 can i use 사이트를 통한 크로스 브라우징 적용
    • 21강
      • 반응형 웹
      • 1. 미디어쿼리에 의한 레이아웃의 변화 이해
      • 2. Mobile First를 통한 미디어쿼리 이해
      • 3. 디바이스별 해상도 이해
      • 4. 논리 픽셀과 물리 픽셀의 이해,
        배율 디자인과 반응형 레이아웃의 이해
      • 5. viewport의 이해
    • 22강
      • UI 개발 실무
      • 1. One Page 사이트 구현 이해와 적용
      • 2. 트래픽과 속도 이슈 이해를 통한 이벤트 제어
      • 3. 마우스 이벤트와 스크롤 이벤트의 이해
      • 4. Full Page (fullPage.js) 코드 분석
      • 5. Full Page 사이트 제작
    • 23강
      • UI 개발 실무
      • 1. 제이쿼리 플러그인 활용
      • 2. 패럴랙스 스크롤링효과
      • 3. 자바스크립트 이미지 갤러리
      • 4. 마이크로 인터랙션의 이해
      • 5. Javascript & JQuery 기초 문법 비교
    • 24강
      • Javascript 기본
      • 1. 연산자의 이해와 활용
      • 2. 제어문의 이해와 활용
      • 3. 객체의 이해와 활용
      • 4. 함수의 이해와 활용
      • 5. 이벤트의 이해와 활용
    • 25강
      • JQuery 기본
      • 1. 연산자의 이해와 활용
      • 2. 제어문의 이해와 활용
      • 3. 객체의 이해와 활용
      • 4. 함수의 이해와 활용
      • 5. 이벤트의 이해와 활용
    • 26강
      • 반응형 웹 제작 실무 1
      • 1. 헤더
      • 2. 네비게이션
      • 3. 비쥬얼 섹션
      • 4. 콘텐츠 섹션
      • 5. 푸터
    • 27강
      • 반응형 웹 제작 실무 2
      • 1.헤더
      • 2. 네비게이션
      • 3. 비쥬얼 섹션
      • 4. 콘텐츠 섹션
      • 5. 푸터
  4. PART 04 WEB PUBLISHING PROJECT

    • 28강

      반응형 웹사이트 개인 포트폴리오 제작 1

    • 29강

      반응형 웹사이트 개인 포트폴리오 제작 2

    • 30강

      반응형 웹사이트 개인 포트폴리오 제작 3

    • 31강

      반응형 웹사이트 개인 포트폴리오 제작 4

    • 32강

      반응형 웹사이트 개인 포트폴리오 제작 5

강사 소개

강사
김혜영

현) 엔게디캠퍼스 대표

홍익대학교 영상대학원 인터렉션디자인과 수료

계원예술대학교, 홍익대학교(세종캠퍼스), 공주대학교, 건국대학교, 서울대학교 출강 아카데미정글, 한국디자인진흥원 강의
LG 유플러스 어도비 세미나 특강

프로젝트 힐링잼 모바일 UI 디자인

결제 방법은 일반결제와 후불제 중 선택할수 있습니다

수강신청 후
결제 방법
일반결제후불제 중 선택할 수 있습니다. 후불제란? > 후불제란? > 후불제 신청 >

01. 일반 결제
  1. 01. 온라인 수강신청

    과정 선택 후 수강 신청을 합니다.

  2. 02. 일반 결제

    계좌이체, 온라인 카드 결제, 내사 카드 결제 중 선택하여 결제합니다.

  3. 03. 교육

    선택한 과정을 수강합니다.

02. 후불제

아카데미정글학생독립만세

  1. 01. 온라인 수강신청

    과정 선택 후 수강 신청 후, 후불제 인증 신청을 합니다.

  2. 02. 후불제 인증 &계약

    후불제 인증 심사 & 계약을 온라인으로 진행하며, 인증료(교육비의 5% 별도 선납)를 납부합니다.

  3. 03. 교육

    선택한 과정을 수강합니다.

  4. 04. 결제

    교육 종료 후, 계약 기간 내에 교육비를 분할 납부 합니다.

오시는 길

아카데미정글은 3호선 신사역 5번출구에서 도보 약 3분 거리입니다.
신사역 5번 출구에서 뒤에 GS주유소를 오른편에 두고 큰 도로를 직진하셔서 JoyMG가 있는 건물(원능프라자) 2층으로 오시면 됩니다. 수강생 분들은 주차장 이용이 불가하오니 대중교통을 이용해주시길 바랍니다.

수강신청 전, 꼭 확인해주세요. 더보기

웹 디자인 & 웹 퍼블리싱
스페셜리스트

  • 웹 디자인 & 웹 퍼블리싱 스페셜리스트

    아카데미정글은 코로나19 바이러스에 대응한 철저한 예방조치로 학원 방역을 확대해 수강생들이 안전한 환경에서 학습할 수 있도록 노력하고 있습니다. (실내 마스크 의무 착용, 매일 소독 진행, 출입시 QR 코드 전자출입명부 작성, 발열체크, 손 소독제 비치)

  • 교육일정
    2020.10.19 - 2020.12.30
    교육시간
    월, 수, 금 / 10:00 - 13:00
    교육장소
    아카데미정글 (강남 신사)
    수 강 료
    총 180만원 / 월 60만원
    • - 온라인 카드 결제시 2~6개월 무이자 할부 가능
    • - 월 60만원씩 3개월 분할 납부 가능: 계좌이체, 방문(내사카드)결제
    • - 월 45만원씩 4개월 후불제 가능: 교육 종료 후 4개월 분납(학생독립만세)
    준 비 물
    개인 노트북(권장)
  • 아카데미정글은 코로나19 바이러스에 대응한 철저한 예방 조치로 학원 방역을 확대해 수강생들이 안전한 환경에서 학습할 수 있도록 노력하고 있습니다.