Orientation
Introduce
이상진
NHN Technology Service
UI developer
홍익대학교 디지털미디어 디자인
GentleMonster
Interaction designer
작업 프로젝트
블로그 메인
지식iN
오디오클립
Selective
플레이스
블로그
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6313149/스크린샷_2019-06-30_오후_6.01.41.png)
지식iN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6313152/스크린샷_2019-06-30_오후_6.02.52.png)
AudioClip
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6313155/스크린샷_2019-06-30_오후_6.03.41.png)
Selective
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6313156/스크린샷_2019-06-30_오후_6.05.49.png)
플레이스
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6352942/스크린샷_2019-07-12_오후_4.16.31.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6352943/스크린샷_2019-07-12_오후_4.17.16.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6428145/스크린샷_2019-08-08_오후_6.19.08.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6352983/KakaoTalk_Photo_2019-07-12-16-27-16.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6353169/KakaoTalk_Photo_2019-07-12-17-21-14.jpeg)
Why...
"디자이너도 코딩을 알면 좋다"
이런 점이
동기부여
"디자이너도 코딩을 할 줄 알면 좋다"
이런 점이
1. UI 디자인 실력
2. 커뮤니케이션 능력
-> 희소성
1. UI 디자인 실력
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6326845/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6326847/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6326849/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6326854/pasted-from-clipboard.png)
2. 커뮤니케이션 능력
개발 요청 사항들
1. 검색 영역 플레이스 홀더 color 정해주세요.
......네..? 🤑
2. 사용된 이미지들을 스프라이트 파일로 만들어주세요.
3. 아이콘 svg 파일에 색상이 stroke로 되어 있어요. fill로 바꿔주세요.
4. 마이&엔드 페이지에서 사용되는 카드 컴포넌트 공통화 부탁드려요.
5. gif 파일은 컨트롤이 불가능해요. Lottie로 진행하려고 하는데
키프레임 json파일 부탁드려요.
인터렉션 관련
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6326858/interactions.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6428152/pasted-from-clipboard.png)
HTML
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6428160/pasted-from-clipboard.png)
HTML + CSS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/744510/images/6428152/pasted-from-clipboard.png)
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
- 652