본문 바로가기
로티 :: lottie 로티 정의 : 애프터이팩트의 애니메이션 -> .json(자바스크립트 객체 : 코드화) 파일로 변환해주는 툴 디자인 작업을 하다보면 animation에 대한 욕구가 솓구칠 때가 있다. 하지만 리소스를 많이 잡아먹으면 어떻하지? 개발자가 반대할텐데... 이런생각으로 포기할때가 많다. 하지만 Airbnb에서 개발한 오픈소스 라이브러리가 있다. 애프터이팩트 (이하, 애팩)에서 작업한 파일을 json로 추출해주는 방식인데 메모리에도 영향을 적게준다. 자세히 알아보자. airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that .. 2020. 11. 27.
유저 플로우 :: user flow user flow (이용 흐름 설계) 유저플로우(user flow)는 비슷한 용어가 참 많다. (task flow, wire flow, flow chart) 등등. 복잡한 듯 보이지만 하지만 한마디로 정의한다면 새로운 형태의 "와이어프레임" 정도로 정의하면 되겠다. 정의 1. 사용자가 특정한 작업 (task)를 완료하기 위해 서비스 내에서 움직이는 경로를 정리하는 것. 2. 사용자 시나리오보다 구체적이며, UI(화면), 행동, 판단으로 표현된다. 구성요소 1. 목표(user goal) : 사용자가 서비스를 통해 얻고자 하는 결과. (상품 구매, 정보 획득, 소통 등) 2. 작업(task) : 목표를 위해 유저가 수행하는 것. (로그인, 회원가입, 장바구니 담기, 검색 등) 3. UI: 화면. (검색화면,.. 2020. 11. 23.
뉴타입의 시대 :: new type 뉴타입의 시대 시대가 원하는 새로운 인재 인재를 바라보는 관점. 1. 우수한 인재를 나타내는 척도는 그 시대만의 사회구조 기술요청에 따라 규정된다. 2. 올드타입 a. 순종적이고 논리적이며 부지런하며 책임감 강한 타입 b. 계획에 집착하며 유연성이 부족하다. c. 올드타입은 새로운 가치를 창출할 수 없고 앞으로 인공지능에 의해 대체될 공산이 크다. d. 양적인 향상에 초점을 둔다. 3. 뉴타입 a. 자유롭고 직관적이며 소신이 뚜렷하고 호기심이 강한타입이다. b. 문제의 해결이 아닌 문제를 발견하고 의미를 창출하는 능력을 가진 타입 c. 바람직한 이상향을 마음속에 간직함. (이상과 현실의 비교분석을 통한 문제찾기) d. 논리와 직관을 상황에 맞게 유연하게 활용하는 유연한 사고를 가짐. - 직관 : 직감, .. 2020. 11. 10.
글자 크기 :: type scale Type scale 정의 Typograph 1. 안드로이드 가이드 기준 a. google material design 구글 material > the type system b. 6+2+2+3이 기본 i. headline ii. subtitle iii. body iv. etc( btn, caption, overline) c. font weight / size / letter spacing로 type 단계별 디테일 높임. d. 프로젝트의 크기에 따라 Headline 수 조절. (참고) Headline폰트와 body폰트종류를 나누어 진행할수도 있는데. Headline은 디자인의 아이덴티티 측면을 body폰트는 가독성을 고려해서 선정하면 좋다. 2. 기타 참고 사이트 a. The typographic scale.. 2020. 11. 3.
웹팩 :: webpack webpack 이란 webpack은 무엇일까? 서로 연관관계가 있는 웹 자원들을 js, css, img 같은 정적인 자원으로 변환해주는 모듈 번들러. 웹페이지에서 잘 돌아가도록 최적화 시켜주고 성능을 올려줌. 번들링이란 C언어가 컴파일 하는것과 비슷하게 필요한 부분들을 묶어주는 역활을 하는것이라 볼 수 있다. 즉 파일을 분류하고 정리하고 실행하는 기준을 만들어주는것이 webpack 이다. webpack없이 글로벌 환경으로 개발시 문제점. html에서 글로벌 환경으로 를 로딩 (asp, jsp 같은 서버사이드 랜더링 방식)하는 서버사이드 랜더링의 문제점을 해결. 예) jquery $변수는 다른 라이브러리에도 사용됨으로 충돌가능 로딩순서에 의존성. 예) jquery를 먼저로딩하고 jquery-ui를 로딩해야.. 2020. 10. 27.
인포그래픽 :: infographic 인포그래픽 정보의 양이 급속도로 증가함에 따라 비주얼 콘텐츠의 중요성이 강조되는 이 시점에서 사물에 대한 본질을 바라보는 통찰력이 중요시되고 있다. 그런데 텍스트로만 빼곡히 채워져 있는 정보가 있다면 누가 읽으려고나 할까? 그래서 정리해 봤다. 인포그래픽의 정의 1. 복잡한 데이터나 많은양의 정보를 단순화 시키는것. 2. 라인, 도형, 그래프, 다이어그램등으로 정보를 간소화하고 직관적으로 전달하는것. 인포그래픽의 종류 1. 통계형 인포그래픽 2. 지도형 인포글래픽 3. 대칭, 비교형 인포그래픽. 4. 프로세스형 인포그래픽. 적용사례 1. 웹사이트 2. 어플리케이션 3. SNS 및 기타 영상 매체 앞으로 갈수록 시각적인 의존도가 높아지게 될텐데 인포그래픽은 다양한 매체에서 제각기 다양한 영향력을 행사할것이.. 2020. 10. 23.
Package.json :: 패키지 버전정보 Package.json npm init 으로 폴더를 초기화 하면 Package.json이라는 파일이 생성된다. 간단하게 한번 알아보자. 이녀석이 뭐하는 녀석인지. pakckage.json을 간단히 나누어보면 크게 2가지 항목으로 나뉘어 볼 수 있는데 1. 프로젝트 정보 2. 패키지 정보 로 나눌 수 있다. 프로젝트 정보는 1. 프로젝트 명은 무엇인지. 2. 버전은 무엇인지, 3. 관련된 정보(모듈패키지)에는 어떤게 있는지. 4. 제작자는 누구고 깃 주소는 어떻게 되는지. 5. 사용방법은 어떻게 되는지. 패키지 정보는 6. 사용중인 패키지의 버전정보는 무엇인지 7. 일반적인 패키지와 8. 개발할때 사용했던 패키지 (실제 배포할때는 필요없는 웹팩이나, 바벨등) 등을 모두 확인할 수 있다. package.js.. 2020. 10. 20.
npm 명령어 :: node package manager npm 명령어 정리 npm 이란. node.js 의 앱스토어. 다양한 package가 존재함. 대표적인 package - webpack 명령어 • terminal에서 npm을 실행-> 관련 명령어 • npm init -y 실행 : 해당폴더를 프로젝트파일 폴더로 초기화 : -y는 초기화 설정값을 default value로. : 값을 따로 설정하고 싶은면 -y를 빼면됨 • npm install : package.json 파일이 있는곳에서 install : npm install : 지역오듈 : npm install -g : 전역모듈 : 경로: 사용자명\AppData\Roaming\npm • npm install @ : 해당버전만 • npm install --save(--save-dev) : package.js.. 2020. 10. 18.
디지털 트랜스포메이션 :: digital transformation 디지털 트랜스포메이션 :: 뉴 호라이즌 : 뉴 호라이즌 (new horizon) 디자이너 이상인 (현, 마이크로소프트 클라우드+인공지능부서 시니어) 이 사람을 알게된 건 "디자이너의 생각법" 이라는 책을 읽고나서 부터다. 그 전 부터 블로그나 sns상에서 다양한 활동을 했었지만 나의 경우는 책에서 얻은 인사이트가 깊었다. RGA 에이전시 출신 디자이너로 디자인도 잘 하시지만 글 또한 굉장이 잘 쓰신다. 인사이트도 있으시고. 그래서 이번책도 구매하게 되었고. 전쟁의 최전방에 있는 디자이너는 세상을 어떻게 바라보고 있는지 잠깐 보도록 할까? chapter.1 1. 디지털트랜스포메이션이란 a. 정의 : 프로세스 전반의 효율화를 위해 디지털의 힘을 빌리는것. b. 디지털에 적응하지 못하면 생존의 위협을 받는시대.. 2020. 10. 13.

티스토리툴바