강의

멘토링

로드맵

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,895

Learners

6,166

Reviews

4.6

Rating

300

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!