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
