Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
Programming

/

Full-stack

Creating PWA Native Apps Using Figma Guide - Figma + HTML + CSS + Progressive Web APP (Application)

Apps play an important role in our daily lives. However, the process of developing and maintaining native apps is long and complex, and can be quite costly. This course introduces Progressive Web Apps (PWA), an alternative that has been gaining attention as of September 2024. PWA combines the advantages of web technology and native apps, enabling faster and more efficient app development and maintenance. Through hands-on practice, you'll learn the concepts, advantages, and implementation methods of PWA step by step, and develop the skills to apply them directly in real-world scenarios.

2 learners are taking this course

  • usefulit
HTML/CSS
JavaScript

What you will learn!

  • You can understand and utilize the concept and implementation methods of PWA (Progressive Web App).

  • You can plan, develop, and deploy your own web app by applying PWA methods.

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용)

앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다.

본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다.

실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.

강의 내용

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용) Part,1

  • Figma를 활용한 UI 디자인 실습

    • 기초 스타일 설정: 색상, 글꼴, 간격 등 기본 디자인 요소 구성

    • 슬라이더 UI 제작: 이미지 또는 콘텐츠가 슬라이드되는 화면 구성

    • 레시피 리스트 디자인: 목록 형태의 정보 배치 및 스타일링

    • 셰프의 팁 섹션 제작: 카드나 배너 형태의 정보 영역 설계

    • 완성된 디자인을 기반으로 프로토타입 제작 및 사용자 흐름 시뮬레이션

  • SwiperJS 기본 문법 학습 및 멀티 슬라이더 구현

    • SwiperJS 라이브러리 설치와 초기 설정 방법 학습

    • 단일 슬라이더 생성 후, 다양한 옵션(자동재생, 네비게이션 버튼 등) 적용

    • 여러 개의 슬라이더를 한 페이지에서 동작시키는 멀티 슬라이더 구현

  • Google Maps API를 활용한 지도 제작

    • Google Maps API 키 발급 및 기본 연동 방법

    • 웹 페이지에 지도 삽입 및 위치 마커 추가

    • 지도 스타일, 줌 레벨, 사용자 상호작용 옵션 설정

피그마 가이드를 이용한 PWA 네이티브 앱 제작 - Figma + HTML + CSS + Progressive Web APP (활용) Part,2

  • 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)

Recommended for
these people

Who is this course right for?

  • Web users who use HTML, CSS, JavaScript

  • App developer who can create native apps

  • A publisher who wants to improve their design skills in practical work

Hello
This is

8,256,026

Learners

6,086

Reviews

4.6

Rating

254

Courses

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

Curriculum

All

20 lectures ∙ (7hr 55min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$61.60

usefulit's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!