
Rhino 6 for Beginners Product Design Part.2
usefulit
This is a lecture on Rhino 3D, which is a basic tool for product design.
Basic
Rhino
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.
4 learners are taking this course
Level Beginner
Course period 12 months
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.
앱은 우리 일상에서 중요한 역할을 합니다. 하지만 네이티브 앱을 개발하고 유지·보수하는 과정은 길고 복잡하며, 많은 비용이 들기도 합니다.
본 강의에서는 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)
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
8,278,678
Learners
6,372
Reviews
4.6
Rating
309
Courses
I will help you grow through useful IT lectures.
All
20 lectures ∙ (7hr 55min)
Course Materials:
$61.60
Check out other courses by the instructor!
Explore other courses in the same field!