본문 바로가기

Widely Design 바로가기

💙 영상리뷰20

디자인 연구소 #10 - 72ppi vs 300dpi 해상도 차이 디자인 연구소 #10 - 72ppi vs 300dpi 해상도 차이 PPI (Pixel Per Inch) : 1인치(2.54cm)에 들어가는 픽셀의 개수 ex) 10ppi = 10 x 10 = 100px ※ 주로 72ppi 사용 DPI (Dots Per Inch) : 1인치에 들어가는 점의 개수 = 프린터기로 출력하는 인쇄물의 해상도 ex) 10dpi = 10 x 10 = 100dot ※ 주로 300dpi 사용 ※ FPS(Frames Per Second) : 1초당 지나가는 사진 프레임(개수) tmi : 1초당 30개의 프레임 사용 ㄴ 이유 : 사람이 1초에 인지할 수 있는 프레임의 개수 결론(웹에서 72ppi를,인쇄물에서 300dpi를 사용하는 이유는?) → 웹에서 72ppi를,인쇄물에서 300dpi를 .. 2022. 2. 5.

#3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 - 스케치 강좌 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 - 스케치 강좌 DPI (Dots per inch) 1인치에 몇 픽셀이 들어가는지 많을수록 화질 ↑ 안드로이드 = 160dpi 기준(무조건) = mdpi mdpi (medium density) 1dp가 1px인 경우 해상도 160dpi = mdpi(medium) → 1px = 1dp 240dpi = hdpi(high) → 1.5px = 1dp 320dpi = xhdpi(extra-high) → 2px = 1dp 480dpi = xxdpi(extra-extra-high) → 3px = 1dp 640dpi = xxxdpi(extra-extra-extra-high) → 4px = 1dp 2022. 2. 3.

IBM의 UX디자이너 김수연이 알려주는 좋은 디자인과 포트폴리오 (Full Version) IBM의 UX디자이너 김수연이 알려주는 좋은 디자인과 포트폴리오 (Full Version) UX디자이너란? User에게 공감하는 사람 User의 입장에서 봐주는 사람 디자인이란? 사람과 사람과의 작업 UX디자인이란? 내가 주체가 되면 안 되고, User가 주체가 돼야 한다. 좋은 디자인이란? 머무는 시간이 오래 걸리는 Product 유명한 디자인 대학교 Pratt SVA the New School FIT 디자인 온라인 강의 플랫폼 추천 스킬쉐어 유데미 린다 디자인 참고 사이트 추천 서핏 드리블 - 비쥬얼 링크드인 - 트랜드 채용정보를 보고 트랜드를 읽는다고 하신다. 브런치 미디움 2022. 1. 29.

자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) variable은 변수값 변경 가능하다. (읽기, 쓰기) constant는 변수값 변경이 불가능하다. (읽기) ㄴ 변수의 값이 변경될 예정이 없다면 const 사용 어렵다.. 시간 날 때 다시 보기,, 2021. 8. 2.

자바스크립트 2, 3. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) 자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+) - 'use strict'; : 자바스크립트 맨 앞에 넣어주면 오류가 나면 알려주는 명령 - 변수 (variable) ex) let (added in ES6) - hosting : 어디에 선언했느냐 상관없이 선언을 항상 가장 위로 끌어올려줌 - constants (≠변수) : 한 번 할당하면 값이 절대 바뀌지 않음 ex) const - C언어의 경우 short, int, long : 정.. 2021. 7. 23.

자바스크립트 기초 Part 2: 함수, 전역변수와 지역변수, 객체, 생성자 | 자바스크립트 강좌 자바스크립트 기초 Part 2: 함수, 전역변수와 지역변수, 객체, 생성자 | 자바스크립트 강좌 특정역할을 하는 코드 덩어리 필요할 때 수동으로 호출하여 사용 - return : 나오면 함수가 그 시점에서 종료된다. - 변수의 유효범위 (Scope) : 변수를 인식할 수 있는 범위 함수 안에서 만든 변수는 밖에서 사용 불가능, 함수 밖에서 만든 변수는 안에서 사용 불가능 전역변수와 지역변수로 나뉨 - 객체 : 속성과 기능을 가진 집합체 객체에 속성을 추가할 때 점 붙이기 ex) 사람 ㄴ 이름, 나이, 몸무게, 취미 등 (특징) ㄴ 말하기, 걷기, 먹기 (기능) - 함수 안에서 사용되는 this : 메서드를 실행한 주체 객체를 가리킴 - 생성자 (constructor)함수 2021. 7. 21.

자바스크립트 기초 Part 1: 시작하기변수, 기본 데이터 형식, 배열, 연산자, 조건문, 반복문 | 자바스크립트 강좌 자바스크립트 기초 Part 1: 시작하기 변수, 기본 데이터 형식, 배열, 연산자, 조건문, 반복문 | 자바스크립트 강좌 - 변수 : 데이터를 담는 공간(그릇) 종류 : var, let, const ※ 자바와 같은 어떠한 언어들은 변수값을 숫자 → 문자열로 바꾸는 것이 불가능하다. - for (초기조건; 조건체크; 조건변경) { } : 조건체크가 만족할 동안 { }를 계속 반복함 ※ for문을 쓸 때, i라는 변수를 쓰는 관례가 있다. - length : 배열의 원소 개수를 담고 있는 속성 length가 원소의 개수를 나타내기 때문에 5를 나타낸다. BUT, 자바스크립트에서는 개수를 0부터 세기 때문에 값1을 빼주어야 한다! 2021. 7. 21.

console.log에 대하여 콘솔 로그 제대로 쓰고 있을까? 🤔 > console.log( ); 개발단계에서 보수적인 데이터를 출력하고자 할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.info( ); 특정한 정보를 출력할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.warn( ); 경보단계에서 출력하고 싶을 때 사용 console.error( ); 심각한 에러가 있는 상태에서 출력하고 싶을 때 사용 ※ log level에 따라 정확한 함수를 사용하는 것이 중요하다. console.assert( ); 특정한 값일 때만 출력하고자 할 때 사용 오브젝트를 출력하고 싶을 때 .. 2021. 6. 17.

게슈탈트 이론으로 보는 와이어프레임 게슈탈트 이론으로 보는 와이어프레임 - 와이어프레임 골격, 간단한 모양을 사용해서 인터페이스를 시각화하는 것 - 기획자 - 디자이너 : 페이지, 기능, 콘텐츠 : 시각적 요소(레이아웃), 사용성 - gestalt 게슈탈트 이론 독일 심리학자 '막스 베르트하이머'가 기차여행을 하는 동안 영감을 얻어 주장한 이론 "우리의 뇌는 구성 요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다." 유사성의 원리 :색, 크기, 모양 등이 동일한 요소들을 하나의 관계로 묶어보려는 경향 근접성의 원리 : 서로 이웃해있는 요소들과 그렇지 않은 요소들을 구분하려는 경향 연속성의 원리 : 연속성을 띄는 배열을 관련성이 있다고 보는 경향 공통영역의 원리 : 박스 안에 있는 요소들을 같.. 2021. 5. 31.

웹디자인 그리드 시스템의 모든 것?! 웹디자인 그리드 시스템의 모든 것?! - pc&mobile 해상도의 차이 - 데스크탑 해상도는 정답이 없다 수많은 모니터와 수많은 스타일 사이트가 존재하기 때문 반응형 웹이기 때문 사용자 폭이 넓을 수록 작은 해상도에 맞추는 게 좋음 ex) 네이버 가로폭 : 1080px - breakpoint 테블릿, 모바일 등 사이즈에 따라 디자인 스타일이 크게 변해야 하는 구간 - 반응형 웹 디바이스 넓이에 따라 최적화된 디자인을 위해 특정 구간에 분기(breackpoint)를 설정해야 함 단을 너무 많이 쪼개면 반응형에 취약할 수 있음 - 그리드 시스템 기본 4요소 - 고정 - container 컨텐츠 폭 : 콘텐츠 영역의 가장 큰 폭의 기준 - columns 단의 수 - margin 마진값 - gutter 커터,.. 2021. 5. 31.

부트스트랩으로 웹 UI 컴포넌트 파악하기 부트스트랩으로 웹 UI 컴포넌트 파악하기 - Button - hover 마우스를 올렸을 때 - active 마우스를 눌렀을때 - disabled 비활성화상태를 표현 ex)투명도를 줘서 흐릿하게 하는 - form/input 이메일, 정보, 숫자 등 입력하는 칸 - checkbox □ - validation 폼 유효성 검사 (제대로 입력되지 않으면 알림) - dropdown 클릭했을 때 숨어져있는 하위메뉴 뜨게 하는 거 - navigation 링크를 모아놓는 곳 - 알약형(기본적) - 탭형 - 수직형 - navigation bar (=header) - breadcrumbles (헨젤과 그레텔의 빵 부스러기) 현위치를 알려주는 태그 현재 페이지는 클릭되지 않고 상위개념 페이지는 언제든지 이동 가능 - pagi.. 2021. 5. 31.

웹디자인 입문 강좌 - 2 이 용어 뭔지 아세요? - 웹디자인 입문 강좌 - UI (사용자 경험) 웹이나 앱, 제품을 사용하고 직감적으로 얻게되는 사용자의 경험 디자인의 의도와 다르게 사용자가 더 편한 방식으로 찾아서 사용 - UI (사용자 인터페이스) 상황에 맞는 화면 디자인 - responsive web 디바이스에 따라 최적화되게 사이즈가 저절로 맞게 화면을 보여주는 기술 - WSG (web style guide) bx(브랜드 경험)를 바탕으로 더 큰 개념으로 접근하는 것이 맞지만 하나의 사이트 내에 다양한 페이지, 일관성을 부여하기 위한 운영 및 관리지침 신속하고 효율적인 제작 가능, 매일 새롭게 디자인과 퍼블리싱을 하며 발생되는 손실 줄임 - affordance (행동 유도성) 심리학에서 출발한 개념으로 UI 디자인에 적용.. 2021. 5. 31.

이전 1 2 다음

티스토리툴바