본문 바로가기
글자 크기 :: 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.
최고의 팀은 무엇이 다른가 :: The secret of highly successful groups 최고의 팀은 무엇이 다른가 동기 회사에서 복지로 받은책인데 2년전에 받은걸 이제서야 읽었다. 생각보다 좋은 내용들이 많이있었다. "팀은 개인보다 강력하고 큰 영향력을 지닌다. 하지만 서로 신뢰를 잃어버린 팀은 없는것보다 못할수도 있다." 팀 안에서 "문제점을 드러낸다는것은" "긴장감을 가진다는것은" "서투름과 힘겨운 피드백이 있다는것은" 결과적으로 신뢰와 협동을 불러올 수 있다. 주요내용 정리 chepter 1 1. 나는 이곳에서 안전한가 a. 꿀사과 vs 독사과 i. 꿀사과 : 1) 부드러운 리더쉽 2) 직접나서기보다 사람들의 여건을 만듦 3) 서로 끈끈하게 연결되어 있다고 느끼는 환경조성 4) 똑똑함 2020. 10. 6.
데일리리포트 :: daily report 2023 데일리리포트 어느덧 2022년도 얼마 남지 않았다. 리포트를 쓴지도 이제 3년이 다되어 가는구나. 컴활을 따놓고 활용할 데가 없어 데일리 리포트를 만들어봤다. 특징 1. 집중도에 따라 하루 일과를 그래프로 확인 가능. 2. 쓸 시간을 미리 정해놓고 쓴다. (돈처럼) 3. 1년 안에서 -> 1달을 보고 -> 1달 안에서 1주와 하루를 본다. 4. 그래프를 통해 인풋이 많은지 아웃풋이 많은지 확인할 수 있다. 데일리 리포트를 시작했었는데 쓰다 보니 나만의 스타일이 생긴 듯하다. 혹시나 도움이 될까 싶어 공유해본다. 데일리 리포트 (편집이 필요하신분은 아래 댓글에 알려주세요!) 1. 한 주 반성하기 지난 한 주 간 자신의 집중도 및 기상시간을 확인하고 에너지 배분을 효율적으로 했는지 확인한다. 2. .. 2020. 10. 4.
portfolio :: UI/UX Behance 링크가 열리지 않을 시 크롬 브라우저로 접속해보세요! 2020. 9. 23.

티스토리툴바