Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

풀스택

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

앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다. 본 강의에서는 2024년 9월 현재 주목받고 있는 대안인 프로그레시브 웹 앱(Progressive Web App, PWA)을 소개합니다. PWA는 웹 기술과 네이티브 앱의 장점을 결합한 방식으로, 더 빠르고 효율적인 앱 개발과 유지 관리를 가능하게 합니다. 실습과 함께 PWA의 개념, 장점, 구현 방법을 단계별로 학습하며, 실무에 바로 적용할 수 있는 역량을 갖추게 됩니다.

2명 이 수강하고 있어요.

  • 유용한IT학습

이런 걸 배울 수 있어요

  • PWA(Progressive Web App) 개념과 구현 방법을 이해하고 활용할 수 있다.

  • PWA 방식을 적용해 자신만의 웹앱을 기획·개발·배포할 수 있다.

피그마 가이드를 이용한 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)

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • HTML, CSS, JavaScript를 사용하는 웹 유저

  • 네이티브 앱을 만들 수 있는 앱 개발자

  • 실무에서 디자인 능력을 향상시키고자 하는 퍼블리셔

안녕하세요
입니다.

8,256,007

수강생

6,085

수강평

4.6

강의 평점

244

강의

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

커리큘럼

전체

20개 ∙ (7시간 55분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

월 ₩15,840

5개월 할부 시

₩79,200

유용한IT학습님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!