본문바로가기

웹 퍼블리셔 &
UI 개발
프로페셔널

  • 기초에서 실무까지
  • 포트폴리오 제작
  • 12주/24강

html, css 기초부터 자바스크립트 및 제이쿼리 기초 및 활용, 반응형 웹, 동적 UI 구현, 최종 포트폴리오 사이트 구성까지.
실무 사례를 바탕으로 응용하여 사이트를 제작하는 방법을 배울 수 있는 실무 중심 과정입니다.

반갑습니다,
아카데미정글입니다 😃
웹 퍼블리셔 & UI 개발 프로페셔널 수업일정 및 공지사항을 확인해주세요!

교육일정

2023.02.14 - 2023.05.04

교육시간

화, 목 / 19:00 - 21:50(주 2회)

교육장소

아카데미정글 (강남 신사)

수 강 료

총 135만원 / 월 45만원 (3개월 월별 납부 가능)

결제방법
  • 1. 온라인 카드 : 2 ~ 6개월 무이자 할부 가능 (👉무이자카드 할부 안내) 2. 내사카드(방문결제): 월 45만원씩 3개월 분할 납부 가능 3. 무통장 입금(계좌이체): 월 45만원씩 3개월 분할 납부 가능
준 비 물

개인 노트북(권장)

🔊 강의 관련 공지사항

  • 오프라인 현장 교육

    아카데미정글 강의는 오프라인 대면 수업으로 진행됩니다.

  • 수업 자료 공유

    수업 관련 교안은
    Notion을 통해
    제공해 드려요.

  • 1:1 크리틱 진행

    1:1 크리틱을 통해 포트폴리오 적용 이론 및 실습을 진행해요.

🎁 강의 수료자 특전

웹 퍼블리셔 & UI 개발 프로페셔널
강의 수료자에게 드리는 특전

이력서 및 자기소개서 작성시, 상담 실장님이 첨삭해 드립니다!
궁금하신 점은 아카데미정글로 문의 주시기 바랍니다📞

🔉 강의 구성 안내

  • 퍼블리싱 실무 워크샵1

    웹 퍼블리싱 실무 워크샵 Ⅰ: HTML, CSS,
    반응형 웹

  • 퍼블리싱 실무 워크샵2

    웹 퍼블리싱 실무 워크샵 Ⅱ: 제이쿼리, 자바스크립트,
    UI개발 포트폴리오

  • 퍼블리셔 ui 개발 프로페셔널

    웹 퍼블리셔 &
    UI 개발 프로페셔널

웹 퍼블리셔 & UI 개발 프로페셔널 과정은 디플로마 과정으로,
HTML, CSS의 기초부터 정확한 개념을 이해하는 "웹 퍼블리싱 실무 워크샵 Ⅰ: HTML. CSS, 반응형 웹" 워크샵 과정과 자바스크립트 및 제이쿼리 기초 및 활용, 반응형 웹, 동적 UI 구현, 최종 포트폴리오 사이트 구성까지 배울 수 있는
"웹 퍼블리싱 실무 워크샵 Ⅱ: 제이쿼리, 자바스크립트, UI개발 포트폴리오" 워크샵 과정으로 구성되어 있어요.

👉 필요에 따라 웹 퍼블리셔 & UI 개발 프로페셔널 디플로마 과정이 아닌 각각의 워크샵 과정으로도 수강하실 수 있어요.

웹 퍼블리싱, 기초부터 포트폴리오까지 제대로 배우고 싶다면?
실무 경험 다수의 강사님들이 강의하는 웹 퍼블리셔 & UI 개발 프로페셔널 과정을 소개합니다👏

Part 1, 2 웹 퍼블리싱 실무 워크샵 Ⅰ:HTML, CSS, 반응형 웹
  • HTML
  • CSS3
  • 실무 코드 위주 예제 학습

웹 퍼블리싱 실무 워크샵 Ⅰ파트에서는 HTML과 CSS에 대한 기본적인 이해를 바탕으로 밀도 있는 기초 학습을 통해 기본에 충실하면서도 탄탄한 마크업을 하는 방법을 배웁니다. 실무에서 사용한 코드를 예제로 학습함으로써 보다 실무 역량을 갖춘 인재로 성장할 수 있어요.

Part 3, 4, 5 웹 퍼블리싱 실무 워크샵 Ⅱ: 제이쿼리, 자바스크립트, UI개발 포트폴리오
  • jQuery
  • JavaScript
  • 반복 학습을 통한 응용 능력 업그레이드

웹 퍼블리싱 실무 워크샵 Ⅱ 파트에서는 실무와 실습을 바탕으로 원리 학습을 통해, 이론 → 실습 → 활용의 단계를 통해 소스 복붙에서 벗어나 응용 능력을 기르고 본인이 원하는 기능을 직접 구현할 수 있는 능력을 키워 포트폴리오를 제작할 수 있어요.

웹 퍼블리싱 포트폴리오를 제작하는 과정,
왜 아카데미정글일까요?

  • 실무 사례를 바탕으로 한 실습

    많은 학생들이 퍼블리싱을 배우고 실무에서 적용하는데 어려움을 겪고 있어요.아카데미정글에서는 실무 사례를 통해 웹 접근성에 맞추어 마크업하는 방법을 학습하고 실제 사례를 통해 응용하여 사이트를 제작하는 방법을 배울거예요.

  • 트렌드에 맞는 스킬 학습

    빠르게 변화하는 트렌드에 앞으로 어떻게 준비를 해야하는지에 대한 전략을 짤수 있게 도움을 드리고자 해요. 포트폴리오 사이트라는 구체적인 방향을 제시해 드리면서 동시에 그 과정에서 배우는 부분들을 활용해 더욱 성장 할 수 있는 시간이 될 수 있을 것입니다.

  • 실무에 적합한 1:1 크리틱

    단순히 코드를 복사 & 붙여넣기만 하는 강의가 아닌, 실무에 맞는 사례를 바탕으로 본인에게 필요한 포트폴리오 사이트를 제작 할 수 있도록 모르는 점이 있거나 궁금한 점이 있으면 강사님이 실무에 초점을 맞춰 알려드립니다.

웹 퍼블리싱 & UI 개발 포트폴리오 과정을 통해
개념을 확실히 만들고 다양하게 적용하는 방법을 학습하여 실무에 바로 적용할 수 있습니다.

  • 😮 코딩을 처음 배우는데 이 수업을 듣고 실무에 바로 적용할 수 있을까요?

    👉 이론과 실습을 분리하지 않고 HTML, CSS에 대한 기본적인 이해와 고유의 특성, 작동 원리를 통해 그림이 아닌 코드를 이용해 모양을 만드는데 필요한 사고와 코드를 다양하게 활용하고 응용 하는 방법을 배워 '브라우저 입장에서 생각하는 훈련'을 통해 실무에 바로 적용할 수 있어요.

  • 🤔 실무에서 활용도가 높은 기법을 배울 수 있나요?

    👉 실제 사이트를 이용해 실습과 설명을 반복하면서 특정 상황에서 의미 있는 태그 사용, 크로스브라우징을 동시에 생각하여 상황별 선택하는 훈련을 할 거예요. 이를 바탕으로 실무에서 주로 사용하는 제이쿼리, 자바스크립트를 단순히 이론이 아닌 현업에서 사용하는 기술을 학습합니다.

  • 😶 강의는 어떤 형식으로 진행되는지 알 수 있나요?

    👉 다양한 프로젝트를 구축한 경험이 있는 강사님이 이야기해주는 현업 및 퍼블리셔 시장을 확인할 수 있고, 코딩 규칙, 웹 접근성, 호환성 등을 정리해요. 노션으로 교안을 공유하고, 포트폴리오 준비 방법 및 기획 단계에 대해 배워 개인 포트폴리오에 적용할 수 있는 능력을 키웁니다.

강의를 이끌어주실 황선수 강사님을 소개합니다 ✋

강사
황선수

(전) (주)위메프 W마인드실 추천서비스 개발팀
(전) 엔에이치엔테크놀로지서비스(주) UIT개발실 UI개발4팀
(전) (주)블루웨이브컨설팅 웹표준화그룹
(전) (주)인실리코젠 지식관리사업부

  • 프로젝트
  • 위메프 W우체통, W추천, 톡상담
  • NAVER 스마트스토어, 블로그, 부동산, 지식iN, SmartEditor 3.0

👨‍🏫 강사님이 이야기하는 "웹 퍼블리셔 & UI 개발 포트폴리오를 꼭 수강해야 하는 이유"

  • 👉 첫번째, 개념을 정확히 학습하고 실습에 응용

    많은 학생들이 퍼블리싱을 배울 때, 개념을 정확히 이해하지 않은 채 단순히 코드를 복사 & 붙여넣기만 해서 실무에 어떻게 활용해야 하는지 고민하는 경우를 많이 봤어요. 이 강의에서는 html, css의 정확한 개념을 바탕으로 실무 사례를 통해 웹 접근성에 맞추어 마크업하는 방법부터 실제 사례를 응용하여 사이트를 제작하는 방법을 배울 거예요.

  • 👉 두번째, 밀도 있는 기초 학습을 통한 능력 업그레이드

    기초가 탄탄할수록 작업 시간은 줄고, 능률은 오릅니다. 밀도있는 기초 학습을 통해 기본에 충실하면서도 탄탄한 마크업을 하는 방법을 배울 거예요. 이론 → 실습 → 활용의 단계를 통해 소스 응용 능력을 기르고, 나아가 수업 내용을 본인의 포트폴리오에 녹여내어 웹사이트의 퀄리티를 높이는 방법을 배울 수 있어요.

웹 퍼블리싱 포트폴리오를 제작하는 웹 퍼블리셔 & UI 개발 프로페셔널 과정에서는
다음과 같은 내용을 배우고 프로젝트를 수행합니다.

황선수 강사님이 참여하신 프로젝트를 소개합니다.

이런 분들을 위한 강의로,
완강 후 여러분은
다음과 같이 성장할 수 있어요👍

  • HTML과 CSS로 웹 사이트를
    제작하고 싶은 분

    기초적인 HTML, CSS 지식을 실무에 바로 적용할 수 있는 방법을 학습하여 나만의 코드로 응용하는 방법을 익혀 웹 표준 사이트를 만들 수 있어요.

  • 실무 노하우를 익혀 전문성을
    높이고 싶은 분

    실무 사례를 바탕으로 하여 웹 사이트 코드를 분석하고 응용해서 실무에서 요구하는 실전 노하우를 통해 퍼블리싱 능력을 키울 수 있어요.

  • 실무에서 스크립트 적용에
    어려움을 겪는 분

    실무 경력 위주의 강사님이 실무에서 사용한 코드를 예제로 알려드릴거예요. 다양한 기술과 퍼블리싱 노하우를 학습할 수 있어요.

  • 깊이 있는 실습 기회를
    경험하고 싶은 분

    퍼블리싱 개념과 이론은 학습해 보았지만 실습 기회가 적었던 예비 퍼블리셔 및 실무 퍼블리셔분들이라면 본인이 원하는 기능을 직접 구현할 수 있는 능력을 기를 수 있어요.

🤚 잠깐, 이 과정이 나에게 맞는 과정인지 아직 고민중이신가요?
아카데미정글 커리큘럼 로드맵을 통해 나에게 맞는 과정인지 확인해보세요! 커리큘럼 로드맵 보러가기

초급 중급 고급
웹 퍼블리싱/
프론트엔드
프론트엔드 개발
취업 아카데미
디노스쿨
웹 퍼블리셔 & UI 개발 프로페셔널

웹 퍼블리싱 실무 워크샵 Ⅰ
: HTML, CSS, 반응형 웹

웹 퍼블리싱 실무 워크샵 Ⅱ
: jQuery, JavaSciprt,
UI개발 포트폴리오

👇 5개의 파트로 구성된 24강의 커리큘럼을 확인해보세요.

  1. 상세히보기 PART 01
    퍼블리싱 기초
    • 01강
      • 오리엔테이션
      • 1. 강의 소개
      • 2. 직무소개
      • 3. 크롬 개발자 도구 활용
      • 4. VS Code 활용
    • 02강
      • HTML 기초
      • 1. Html 기본 구조
      • 2. HTML 주요 태그
      • 3. block, inline, inline-block
    • 03강
      • CSS 기초 (1)
      • 1. 스타일적용방법
      • 2. 선택자
      • 3. 박스모델
      • 4. 웹폰트
    • 04강
      • CSS 기초 (2)
      • 1. 레이아웃
      • 2. display, float, position, z-index
    • 05강
      • 반응형 레이아웃
      • 1. 반응형 기본 개념
      • 2. 반응형 적용 (미디어쿼리)
    • 06강
      • HTML & CSS 활용
      • 1. 레이아웃, UI요소 커스텀 제작 실습
    • 07강
      • CSS 심화
      • 1. flex
      • 2. transform
      • 3. transition
      • 4. animation
  2. 상세히보기 PART 02
    응용 실습
    • 08강
      • UI 요소 포트폴리오
      • 1. table
      • 2. form
      • 3. list
    • 09강
      • 프로모션 포트폴리오
      • 1. 프로모션 페이지 제작 실습
    • 10강
      • 반응형 웹사이트 포트폴리오 (1)
      • 1. Main 페이지 제작 실습
    • 11강
      • 반응형 웹사이트 포트폴리오 (2)
      • 1. Detail 페이지 제작 실습
    • 12강
      • JQuery 기초
      • 1. 기본 설명 및 적용 방법
      • 2. 인터렉션 기능 추가
      • 3. 플러그인 적용
  3. 상세히보기 PART 03
    포트폴리오 구축 및 UI개발
    • 13강
      • 오리엔테이션
      • 1. 강의 소개
      • 2. 퍼블리셔란?
      • 3. 다른파트와의 협업
      • 4. 프로젝트동향 및 용어
      • 5. 실무문서 살펴보기(스토리보드, 가이드, 퍼블리싱 목록 등)
      • 6. 실습환경 및 에디터 소개 (vscode, ftp)
    • 14강
      • HTML 기초
      • 1. Html 기본 구조
      • 2. HTML 주요 태그
      • 3. 메타 태그
      • 4. 시멘틱 태그
      • 5. block, inline, inline-block
    • 15강
      • CSS 기초
      • 1. 스타일적용방법
      • 2. 선택자
      • 3. 웹폰트
      • 4. 폼태그 디자인 (input, radio, check, select, button, switch)
      • 5. reset과 크로스브라우징
    • 16강
      • CSS Layout
      • 1. 박스모델의 이해
      • 2. position, float, overflow
      • 3. Flexbox
      • 4. CSS 상속
      • 5. Multi-column Layout
    • 17강
      • CSS 활용
      • 1. Animation, transform, transition
      • 2. Sprites Sheet Animation
      • 3. loading 애니메이션 만들기
    • 18강
      • 반응형(미디어쿼리)
      • 1. 반응형 기본 개념
      • 2. 반응형 적용
      • 3. 뷰포트, 플렉서블 박스
    • 19강
      • jQuery
      • 1. 데이터타입
      • 2. 기본문법
      • 3. CSS를 이용한 효율적인 스크립트 짜기
      • 4. jQuery 주요 플러그인 적용법
    • 20강
      • 탬플릿으로 구조설계
      • 1. 레이아웃 구조잡기
      • 2. css재사용을 위한 효율적 구조잡기 (네이밍, 멀티클래스, 선택자 등)
    • 21강
      • 컨텐츠 페이지 실습
      • 1. 게시판 만들기
      • 2. 쇼핑몰 목록 만들기
      • 3. 레이어팝업 만들기
    • 22강
      • jQuery 실습
      • 1. 자리 예약 시스템 만들기
    • 23강
      • 반응형 레이아웃 잡기(1)
      • 1. 상용사이트 벤치마킹 마크업&CSS
    • 24강
      • 반응형 레이아웃 잡기(2)
      • jQuery&CSS3 인터렉션 디테일 적용하기
  4. 상세히보기 PART 04
    JavaScript & jQuery
    • 25강
      • 오리엔테이션
      • 1. 강의소개
      • 2. 크롬 개발자 도구 활용
      • 3. VS Code 활용
      • 4. HTML & CSS 기초 다지기
    • 26강
      • 샘플 웹 사이트
      • 1. 웹 페이지 구조 이해
      • 2. 반응형 UI 이해
      • 3. jQuery load를 이용한 UI 구성
      • 4. jQuery 선택자와 이벤트 개념 이해
    • 27강
      • 웹 이력서 제작
      • 1. 웹 이력서 페이지 제작
      • 2. 이력 계산 스크립트
    • 28강
      • fullpage를 이용한 원페이지 사이트 구현
      • 1. 스크롤 슬라이드 구조 이해
      • 2. fullpage 기본 구조 및 옵션 활용
    • 29강
      • JavaScript & jQuery
      • 1. 프로그래밍 기초
      • 2. 데이터 타입, 논리/비교 연산자
      • 3. 변수, 배열, 함수, 조건문, 반복문
      • 4. 선택자, 클래스 추가/삭제
    • 30강
      • jQuery 이벤트 활용
      • 1. 카운터 구현
      • 2. 메일 시그니처 구현
      • 3. 채팅 UI 구현
      • jQuery 플러그인 활용
      • 1. swiper를 이용한 슬라이드 구현
      • 2. Slider filter 구현
      • 3. google chart를 이용한 정보 시각화
      • 4. Isotope를 이용한 요소 재배치
    • 31강
      • ajax & json 기초
      • 1. 데이터 호출 방식 이해
      • 2. 프론트엔드 사이드 렌더링 이해
      • 3. 자리예약시스템 구현
      • 4. Open API 활용
    • 32강
      • CSS 전처리기(Sass) 기초와 활용
      • 1. Sass 기초
      • 2. 변수, 연산, 제어문, 조건문, 반복문, 함수
      • 3. Mixin, each, map
    • 33강
      • Git 기초
      • 1. GitHub 설치
      • 2. Git 설치
      • 3. Command Line Interface 이해
      • 4. Git 명령어 활용
    • 34강
      • 실무 프론트 UI 이해
      • 1. 폰트 아이콘 (Font Awesome)
      • 2. UI Grid System
      • 3. UI 프레임워크 (Bootstrap)
      • 4. 코딩 컨벤션
      • 5. 디자인 시안 이해 (PSD, Zeplin, Figma)
    • 35강
      • 코딩 테스트 체험
      • 1. To-Do List 구현을 통한 코딩 테스트 체험
      • 2. 요구사항에 맞게 구현하는 연습
      • 3. 복합적인 UI 요소 다루기
    • 36강
      • 개인 포트폴리오 제작
      • 1. 반응형 템플릿 활용
      • 2. 도메인, 호스팅, FTP

수강생들이 직접 작성한 수강후기를 통해 전반적인 수업 분위기를 확인해보세요.

수강 신청하기 전, 예비 수강생 여러분께 전합니다.

  • 01

    이 강의는 기초부터 시작하는 스타트업 과정으로, 난이도 중급까지진행되는 과정이에요. 기초 지식이 없어도, 열심히 수강하고 학습하시면 과정이 끝나는 날에는 실력이 향상된 자신을 만날 수 있어요.

  • 02

    이 과정은 "웹 퍼블리싱 실무 워크샵 Ⅰ : HTML, CSS, 반응형 웹" 워크샵 과정과 "웹 퍼블리싱 실무 워크샵 Ⅱ: 제이쿼리, 자바스크립트, UI 개발 포트폴리오" 워크샵 과정으로 구성되어 있어 나누어 수강할 수 있어요.

  • 03

    원리 학습을 통해 본인이 원하는 기능을 직접 구현할 수 있는 능력을 키울 수 있는 과정으로, 성실하게 수업에 참여하시면 배운 내용을 본인의 포트폴리오에 녹여낼 수 있어요.

  • 04

    강의장에 공용 PC가 준비되어 있지만, 보다 원활한 수강을 위해 가급적 개인 노트북을 가져오길 권장합니다.

다음기수 개강 알림문자 신청, 뉴스레터 신청

🙋 이번 기수는 듣지 못해
아쉬워하는 분들을 위해
준비했어요.

해당 강의의 정확한 다음 기수 강의 일정을 사전에 공지해 드리기 어려워요.

👉 대신, 다음 기수 개강 알림 문자를 신청하시면 새로운 기수 개강일과 관련한 문자를 보내 드릴게요. 👉 아카데미정글의 보다 다양한 강의 개강 일정이 궁금하시다면, 뉴스레터를 신청해주세요.
매주 발행되는 뉴스레터를 통해 아카데미정글의 강의 개강 일정을 메일로 보다 편리하게 확인하실 수 있어요.

다음 기수 개강 알림 문자 신청하기아카데미정글 뉴스레터 신청하기

🔎 오시는 길은 다음과 같아요.

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

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

웹퍼블리셔 & UI 개발
프로페셔널 54기

  • 웹 퍼블리셔 UI개발 프로페셔널 44기

    아카데미정글은 코로나19 바이러스에 대응한 철저한 예방조치로 학원 방역을 확대해 수강생들이 안전한 환경에서 학습할 수 있도록 노력하고 있습니다.

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