
정보처리기사 실기 (2020 개정) 제대로 배우기 Part.2
유용한IT학습
정보처리기사 실기 과목 자격증 대비 강의로, 정보시스템 등의 개발 요구사항을 이해하기 위한 기초 지식을 익힐 수 있습니다. (두 번째 파트)
Basic
정보처리기사
앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다. 본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다. 실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.
PWA(Progressive Web App) 개념과 구현 방법을 이해하고 활용할 수 있다.
PWA 방식을 적용해 자신만의 웹앱을 기획·개발·배포할 수 있다.
앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다.
본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다.
실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.
Figma를 활용한 UI 디자인 실습
기초 스타일 설정: 색상, 글꼴, 간격 등 기본 디자인 요소 구성
슬라이더 UI 제작: 이미지 또는 콘텐츠가 슬라이드되는 화면 구성
레시피 리스트 디자인: 목록 형태의 정보 배치 및 스타일링
셰프의 팁 섹션 제작: 카드나 배너 형태의 정보 영역 설계
완성된 디자인을 기반으로 프로토타입 제작 및 사용자 흐름 시뮬레이션
SwiperJS 기본 문법 학습 및 멀티 슬라이더 구현
SwiperJS 라이브러리 설치와 초기 설정 방법 학습
단일 슬라이더 생성 후, 다양한 옵션(자동재생, 네비게이션 버튼 등) 적용
여러 개의 슬라이더를 한 페이지에서 동작시키는 멀티 슬라이더 구현
Google Maps API를 활용한 지도 제작
Google Maps API 키 발급 및 기본 연동 방법
웹 페이지에 지도 삽입 및 위치 마커 추가
지도 스타일, 줌 레벨, 사용자 상호작용 옵션 설정
HTML로 헤더와 본문 구조 제작
HTML 태그를 사용해 페이지의 기본 골격 구성
헤더 영역(로고, 메뉴, 제목 등)과 본문 영역(콘텐츠, 이미지, 텍스트 등) 분리
시맨틱 태그를 활용해 구조적이고 의미 있는 마크업 작성
CSS로 헤더와 본문 스타일링 구현
색상, 폰트, 배경, 레이아웃 등 시각적 디자인 적용
Flexbox 또는 Grid를 사용한 레이아웃 배치
반응형 스타일링을 적용해 다양한 화면 크기에 맞는 디자인 구현
JavaScript로 헤더와 본문 기능 개발
메뉴 버튼 클릭, 스크롤 시 헤더 변화 등 동적인 UI 기능 추가
본문 콘텐츠와의 상호작용(슬라이드, 탭, 애니메이션 등) 구현
DOM 조작과 이벤트 핸들링 기본 패턴 적용
GitHub를 활용한 웹 페이지 호스팅 방법 학습
GitHub 저장소 생성 및 프로젝트 업로드
GitHub Pages 설정을 통한 웹 페이지 무료 호스팅
배포 후 접속 가능한 URL 생성 및 공유 방법
완성된 웹 페이지를 기반으로 PWA 앱 제작
PWA(Progressive Web App) 개념과 장점 이해
웹 페이지에 Service Worker, manifest.json 추가
오프라인 동작, 홈 화면 아이콘 추가, 앱처럼 실행되는 기능 구현
이 강의는 지식공유자의 질문/답변을 제공하지 않습니다.
part 1 - 강의 활용 파일(coding,layout,pwa)
part 2 - 강의 활용 파일(coding,layout,pwa)
학습 대상은
누구일까요?
HTML, CSS, JavaScript를 사용하는 웹 유저
네이티브 앱을 만들 수 있는 앱 개발자
실무에서 디자인 능력을 향상시키고자 하는 퍼블리셔
전체
20개 ∙ (7시간 55분)
해당 강의에서 제공:
12. 헤더 HTML 제작
25:40
13. 본문 HTML 제작
27:38
14. 헤더 CSS 제작
28:06
15. 본문 CSS 제작1
28:18
16. 본문 CSS 제작2
30:07
17. 헤더 JavaScript 제작
32:18
18. 본문 JavaScript 제작
14:33
20. PWA 앱 만들기
30:50
월 ₩15,840
5개월 할부 시
₩79,200
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!