러닛 회원가입
러닛 회원 로그인
사용자 인증
Framer 모바일앱 프로토타이핑
일정 2019년 03월 예정 시간 미정 장소 러닛 압구정센터 지도보기 참가비 18만원  x 2개월 = 36만원

찜하기 클릭 시 강의 시작 전 알려드립니다.

강의 소개

소개

본 강의는 리더님과 함께 오픈을 준비중인 과정입니다 :)
찜하기를 눌러두시면 오픈 시에 알려드리도록 하겠습니다!

디자이너가 머릿 속에 그린 인터랙션을 개발자에게 설명하기란 쉽지 않습니다. 자신의 생각을 실제 인터랙션으로 구현할 수 있다면, 개발자와 소통의 괴리를 크게 줄일 수 있습니다. 본 스터디에서는 실제 네이버 앱에 적용된 다양한 인터랙션을 대표적인 프로토타이핑 도구인 Framer를 활용해서 직접 만들어보는 것을 목표로 합니다!

참가대상

- 자신의 생각을 실제 인터랙션으로 구현해보고 싶은 디자이너
- Framer 툴을 익히고 싶은 모든 분

상세정보

  • 일정2019년 03월 예정
  • 시간미정
  • 장소러닛 압구정센터 지도보기
  • 참가비 18만원  x 2개월 = 36만원

후기

    커리큘럼 소개

    주교재로 <모바일 앱 프로토타이핑>을 사용합니다.
    Framer 모바일앱 프로토타이핑
    • 1. 왜 프로토타이핑인가
      - 프로토타이핑이란
      - 하이피델리티 프로토타이핑 도구의 등장
      - Framer를 이용한 프로토타이핑

      2. 프로토타이핑 시작하기
      - 프로토타이핑 도구 준비
      - 커피스크립트 이해하기
      - 이미지 리소스 준비하기
      - 레이어 개념 이해하기

      1. 왜 프로토타이핑인가<br>
- 프로토타이핑이란<br>
- 하이피델리티 프로토타이핑 도구의 등장 <br>
- Framer를 이용한 프로토타이핑 <br>
<br>
2. 프로토타이핑 시작하기<br>
- 프로토타이핑 도구 준비 <br>
- 커피스크립트 이해하기 <br>
- 이미지 리소스 준비하기 <br>
- 레이어 개념 이해하기
    • 3. 이벤트와 애니메이션을 이용한 인터랙션 만들기
      - 애니메이션
      - 이벤트
      - 머티리얼 디자인 인터랙션 만들기
      - 플로팅 액션 버튼 인터랙션 만들기
      - 애니메이션 저장하기

      4. 사이드 메뉴가 있는 인터페이스 만들기
      - 상태
      - 좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기

      3. 이벤트와 애니메이션을 이용한 인터랙션 만들기<br>
- 애니메이션 <br>
- 이벤트 <br>
- 머티리얼 디자인 인터랙션 만들기 <br>
- 플로팅 액션 버튼 인터랙션 만들기 <br>
- 애니메이션 저장하기 <br>
<br>
4. 사이드 메뉴가 있는 인터페이스 만들기<br>
- 상태 <br>
- 좌우 사이드 메뉴가 있는 네이버 앱 구조 만들기
    • 5. 퀵 메뉴 만들기
      - 드래그
      - 네이버 앱 퀵 메뉴 만들기
      - 편집 모드의 순서 편집 기능 만들기

      6. 브라우저 스크롤 인터랙션 만들기
      - 스크롤
      - 스크롤해서 바 숨기기 인터랙션 만들기
      - 스크롤해서 내비게이션 디자인 바꾸기

      5. 퀵 메뉴 만들기<br>
- 드래그 <br>
- 네이버 앱 퀵 메뉴 만들기 <br>
- 편집 모드의 순서 편집 기능 만들기 <br>
<br>
6. 브라우저 스크롤 인터랙션 만들기<br>
- 스크롤 <br>
- 스크롤해서 바 숨기기 인터랙션 만들기 <br>
- 스크롤해서 내비게이션 디자인 바꾸기
    • 7. 좌우 페이지 인터랙션 만들기
      - 페이지
      - 네이버 앱 페이지 구조 만들기
      - 워크스루 만들기

      8. 스크롤하면 크기가 변하는 헤더 만들기
      - 모듈레이트
      - 스크롤 위치에 따라 요소가 변하는 헤더 만들기

      7. 좌우 페이지 인터랙션 만들기<br>
- 페이지 <br>
- 네이버 앱 페이지 구조 만들기 <br>
- 워크스루 만들기 <br>
<br>
8. 스크롤하면 크기가 변하는 헤더 만들기<br>
- 모듈레이트 <br>
- 스크롤 위치에 따라 요소가 변하는 헤더 만들기
    • 9. 스티키 헤더 인터랙션 만들기
      - 체인지 이벤트
      - 스티키 헤더 만들기

      10. 슬라이더로 미디어 플레이어 조정하기
      - 슬라이더 컴포넌트
      - 비디오 플레이어 만들기

      9. 스티키 헤더 인터랙션 만들기<br>
- 체인지 이벤트 <br>
- 스티키 헤더 만들기 <br>
<br>
10. 슬라이더로 미디어 플레이어 조정하기<br>
- 슬라이더 컴포넌트 <br>
- 비디오 플레이어 만들기 <br>
    • 11. 스틸컷 디자인에서 인터랙션까지
      - 네이버 앱 콘셉트 디자인
      - 네이버 앱 콘셉트 프로토타입 만들기

      12. 최종 정리
      - 결과물 피드백

      11. 스틸컷 디자인에서 인터랙션까지<br>
- 네이버 앱 콘셉트 디자인 <br>
- 네이버 앱 콘셉트 프로토타입 만들기 <br>
<br>
12. 최종 정리<br>
- 결과물 피드백


    강의 참가신청