Orientation

Introduce

이상진

NHN Technology Service

UI developer

홍익대학교 디지털미디어 디자인

GentleMonster

Interaction designer

작업 프로젝트

블로그 메인

지식iN

오디오클립

Selective

플레이스

블로그

지식iN

AudioClip

Selective

플레이스

Why...

"디자이너도 코딩을 알면 좋다"

이런 점이

동기부여

"디자이너도 코딩을 할 줄 알면 좋다"

이런 점이

1. UI 디자인 실력

2. 커뮤니케이션 능력

-> 희소성

1. UI 디자인 실력

2. 커뮤니케이션 능력

개발 요청 사항들

1. 검색 영역 플레이스 홀더 color 정해주세요.

......네..? 🤑

2. 사용된 이미지들을 스프라이트 파일로 만들어주세요.

3. 아이콘 svg 파일에 색상이 stroke로 되어 있어요. fill로 바꿔주세요.

4. 마이&엔드 페이지에서 사용되는 카드 컴포넌트 공통화 부탁드려요.

5. gif 파일은 컨트롤이 불가능해요. Lottie로 진행하려고 하는데

     키프레임 json파일 부탁드려요.

인터렉션 관련

HTML

HTML + CSS

HTML

JavaScript

1) 머리를 click하면

2) 시계방향으로 45도 회전해

3) 크기도 1.3배 커지게 해

4) 2초가 지나면 원래대로 돌아와

머리 요소 Animation

전제 :

HTML / CSS 로 디자인을 다 표현할 수 있어야, 원하는 interaction 구현 가능

Q. Protopie, Adobe XD 등 프로토타이핑 툴에서는 코드없이 인터렉션이 되던데요..?

A. 네, 가능해요. 하지만 기본으로 제공해주는 동작 외에는 구현이 안되요. 원하는 동작을 구현할 수 없는 경우가 많아요.

Q. Framer, Framer X 같은 툴은 html, css 없이 할 수 있지 않나요?

A. 반은 맞고 반은 틀려요.

     Framer는 html, css, js를 간략화 해둔 툴이에요.

     결국에 본질을 모르면 원하는 것을 구현 할 수 없어요.

A. Framer X는 제 개인적 견해로는 디자이너를 위한 툴이 아니라,

     개발용 툴이에요. 실제 개발 코드랑 거의 다를게 없어요.
     외부에서 디자이너를 위한 Framer X 같은 수업들은 안지용 님

     정도되야 자유자재로 다룰 수 있어요.

Only

HTML + CSS 

Animation

HTML / CSS 로 디자인을 다 표현할 수 있어야,

원하는 interaction 구현 가능

3. 희소성

목표 & 방법

- 실무 유형별 예제 UI

- 포트폴리오 디자인, 개발

- 실무 Tip 공유

목표 & 방법

HTML / CSS

 

Tip 커뮤니케이션

 

Desing System

 

CSS Animation

 

JavaScript

 

Interaction Prototyping

요청 & 당부

- 좌절 O / 절대 포기 X

- 시간을 투자해주세요.

- 피드백 부탁드려요.

Orientation

By Sang Jin Lee

Orientation

  • 601