티스토리

widely design

검색하기

블로그 홈

widely design

ricemany.tistory.com/m

widely design 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

디자인 연구소 #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를 .. 공감수 0 댓글수 0 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 공감수 0 댓글수 0 2022. 2. 3.
IBM의 UX디자이너 김수연이 알려주는 좋은 디자인과 포트폴리오 (Full Version) IBM의 UX디자이너 김수연이 알려주는 좋은 디자인과 포트폴리오 (Full Version) UX디자이너란? User에게 공감하는 사람 User의 입장에서 봐주는 사람 디자인이란? 사람과 사람과의 작업 UX디자인이란? 내가 주체가 되면 안 되고, User가 주체가 돼야 한다. 좋은 디자인이란? 머무는 시간이 오래 걸리는 Product 유명한 디자인 대학교 Pratt SVA the New School FIT 디자인 온라인 강의 플랫폼 추천 스킬쉐어 유데미 린다 디자인 참고 사이트 추천 서핏 드리블 - 비쥬얼 링크드인 - 트랜드 채용정보를 보고 트랜드를 읽는다고 하신다. 브런치 미디움 공감수 0 댓글수 0 2022. 1. 29.
자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) variable은 변수값 변경 가능하다. (읽기, 쓰기) constant는 변수값 변경이 불가능하다. (읽기) ㄴ 변수의 값이 변경될 예정이 없다면 const 사용 어렵다.. 시간 날 때 다시 보기,, 공감수 0 댓글수 0 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 : 정.. 공감수 0 댓글수 0 2021. 7. 23.
자바스크립트 기초 Part 2: 함수, 전역변수와 지역변수, 객체, 생성자 | 자바스크립트 강좌 자바스크립트 기초 Part 2: 함수, 전역변수와 지역변수, 객체, 생성자 | 자바스크립트 강좌 특정역할을 하는 코드 덩어리 필요할 때 수동으로 호출하여 사용 - return : 나오면 함수가 그 시점에서 종료된다. - 변수의 유효범위 (Scope) : 변수를 인식할 수 있는 범위 함수 안에서 만든 변수는 밖에서 사용 불가능, 함수 밖에서 만든 변수는 안에서 사용 불가능 전역변수와 지역변수로 나뉨 - 객체 : 속성과 기능을 가진 집합체 객체에 속성을 추가할 때 점 붙이기 ex) 사람 ㄴ 이름, 나이, 몸무게, 취미 등 (특징) ㄴ 말하기, 걷기, 먹기 (기능) - 함수 안에서 사용되는 this : 메서드를 실행한 주체 객체를 가리킴 - 생성자 (constructor)함수 공감수 0 댓글수 0 2021. 7. 21.
자바스크립트 기초 Part 1: 시작하기변수, 기본 데이터 형식, 배열, 연산자, 조건문, 반복문 | 자바스크립트 강좌 자바스크립트 기초 Part 1: 시작하기 변수, 기본 데이터 형식, 배열, 연산자, 조건문, 반복문 | 자바스크립트 강좌 - 변수 : 데이터를 담는 공간(그릇) 종류 : var, let, const ※ 자바와 같은 어떠한 언어들은 변수값을 숫자 → 문자열로 바꾸는 것이 불가능하다. - for (초기조건; 조건체크; 조건변경) { } : 조건체크가 만족할 동안 { }를 계속 반복함 ※ for문을 쓸 때, i라는 변수를 쓰는 관례가 있다. - length : 배열의 원소 개수를 담고 있는 속성 length가 원소의 개수를 나타내기 때문에 5를 나타낸다. BUT, 자바스크립트에서는 개수를 0부터 세기 때문에 값1을 빼주어야 한다! 공감수 0 댓글수 0 2021. 7. 21.
console.log에 대하여 콘솔 로그 제대로 쓰고 있을까? 🤔 > console.log( ); 개발단계에서 보수적인 데이터를 출력하고자 할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.info( ); 특정한 정보를 출력할 때 사용 ㄴ 웬만하면 배포할 때는 삭제하고 배포하는 것이 좋음 (성능에 영향을 줄 수 있기 때문에) console.warn( ); 경보단계에서 출력하고 싶을 때 사용 console.error( ); 심각한 에러가 있는 상태에서 출력하고 싶을 때 사용 ※ log level에 따라 정확한 함수를 사용하는 것이 중요하다. console.assert( ); 특정한 값일 때만 출력하고자 할 때 사용 오브젝트를 출력하고 싶을 때 .. 공감수 0 댓글수 0 2021. 6. 17.
게슈탈트 이론으로 보는 와이어프레임 게슈탈트 이론으로 보는 와이어프레임 - 와이어프레임 골격, 간단한 모양을 사용해서 인터페이스를 시각화하는 것 - 기획자 - 디자이너 : 페이지, 기능, 콘텐츠 : 시각적 요소(레이아웃), 사용성 - gestalt 게슈탈트 이론 독일 심리학자 '막스 베르트하이머'가 기차여행을 하는 동안 영감을 얻어 주장한 이론 "우리의 뇌는 구성 요소들을 개별적으로 보기에 앞서서 그 윤곽이나 패턴, 형태적 차이를 먼저 파악하려는 습성을 지녔다." 유사성의 원리 :색, 크기, 모양 등이 동일한 요소들을 하나의 관계로 묶어보려는 경향 근접성의 원리 : 서로 이웃해있는 요소들과 그렇지 않은 요소들을 구분하려는 경향 연속성의 원리 : 연속성을 띄는 배열을 관련성이 있다고 보는 경향 공통영역의 원리 : 박스 안에 있는 요소들을 같.. 공감수 0 댓글수 0 2021. 5. 31.
웹디자인 그리드 시스템의 모든 것?! 웹디자인 그리드 시스템의 모든 것?! - pc&mobile 해상도의 차이 - 데스크탑 해상도는 정답이 없다 수많은 모니터와 수많은 스타일 사이트가 존재하기 때문 반응형 웹이기 때문 사용자 폭이 넓을 수록 작은 해상도에 맞추는 게 좋음 ex) 네이버 가로폭 : 1080px - breakpoint 테블릿, 모바일 등 사이즈에 따라 디자인 스타일이 크게 변해야 하는 구간 - 반응형 웹 디바이스 넓이에 따라 최적화된 디자인을 위해 특정 구간에 분기(breackpoint)를 설정해야 함 단을 너무 많이 쪼개면 반응형에 취약할 수 있음 - 그리드 시스템 기본 4요소 - 고정 - container 컨텐츠 폭 : 콘텐츠 영역의 가장 큰 폭의 기준 - columns 단의 수 - margin 마진값 - gutter 커터,.. 공감수 0 댓글수 0 2021. 5. 31.
부트스트랩으로 웹 UI 컴포넌트 파악하기 부트스트랩으로 웹 UI 컴포넌트 파악하기 - Button - hover 마우스를 올렸을 때 - active 마우스를 눌렀을때 - disabled 비활성화상태를 표현 ex)투명도를 줘서 흐릿하게 하는 - form/input 이메일, 정보, 숫자 등 입력하는 칸 - checkbox □ - validation 폼 유효성 검사 (제대로 입력되지 않으면 알림) - dropdown 클릭했을 때 숨어져있는 하위메뉴 뜨게 하는 거 - navigation 링크를 모아놓는 곳 - 알약형(기본적) - 탭형 - 수직형 - navigation bar (=header) - breadcrumbles (헨젤과 그레텔의 빵 부스러기) 현위치를 알려주는 태그 현재 페이지는 클릭되지 않고 상위개념 페이지는 언제든지 이동 가능 - pagi.. 공감수 0 댓글수 0 2021. 5. 31.
웹디자인 입문 강좌 - 2 이 용어 뭔지 아세요? - 웹디자인 입문 강좌 - UI (사용자 경험) 웹이나 앱, 제품을 사용하고 직감적으로 얻게되는 사용자의 경험 디자인의 의도와 다르게 사용자가 더 편한 방식으로 찾아서 사용 - UI (사용자 인터페이스) 상황에 맞는 화면 디자인 - responsive web 디바이스에 따라 최적화되게 사이즈가 저절로 맞게 화면을 보여주는 기술 - WSG (web style guide) bx(브랜드 경험)를 바탕으로 더 큰 개념으로 접근하는 것이 맞지만 하나의 사이트 내에 다양한 페이지, 일관성을 부여하기 위한 운영 및 관리지침 신속하고 효율적인 제작 가능, 매일 새롭게 디자인과 퍼블리싱을 하며 발생되는 손실 줄임 - affordance (행동 유도성) 심리학에서 출발한 개념으로 UI 디자인에 적용.. 공감수 0 댓글수 0 2021. 5. 31.
웹디자인 입문 강좌 - 1 #1 지금 웹 디자인을 배우는 건 너무 늦었나? - 웹디자인 입문 강좌 https://www.youtube.com/watch?v=0q0tdEbNci4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=1 ui는 대부분 스케치로 작업 이미지 편집, 그래픽은 포토샵으로 작업 web이란 무엇인가? - 소통을 위해서! - 미디어변화 (과거)일방향→(현재)쌍방향 - 단계 : 기획 > 디자인 > 개발 ㄴ(세분화) : 기획 > 웹디자인 > 웹프론트앤드개발 > 백앤드개발 > 운영 및 유지보수 공감수 0 댓글수 0 2021. 5. 31.
자바스크립트의 역사와 현재 그리고 미래 자바스크립트 배우기전 꼭 봐야할 영상 | 자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js) - 드림코딩 by 엘리 유튜브 1993년 MOSIAC의 등장 ㄴ marc andreessen가 주도 1994년 marc andressen이 대학교를 졸업하자 마자 NETSCAPE 회사 설립 NETSCAPE : 정적인 웹사이트만 가능, 시장에서 80% 점유율 ↓ 동적인 웹사이트를 만들기 위하여 scripting 언어 추가 후보 1) java : 개발자들에게 어려워서 패스 후보 2) brendan eich라는 사람을 섭외해 기존 scheme를 변형 → 채택됨 ↓ 1994년 9월 mocha의 등장 (→ livescript로 이름변경) (java.. 공감수 0 댓글수 0 2021. 5. 30.
레이어와 에셋 정리하는법 (Feat. Zeplin) - 웹디자인 입문 강좌 www.youtube.com/watch?v=2xq-cJCoBMI&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=14 작업 완료 후 클라이언트에게 보낼 때 주의사항 1 레이어 정리 위 -> 아래 숫자 매겨줌 ex) #01 header -> #02 banner #을 넣는 이유 : 하위 심볼 혹은 그룹과의 차별을 위하여 컴포넌트의 정확한 명을 적고, 섹션 같은 경우는 해당 섹션명으로 적어주기 2 내보내기 해야할 요소들 make exportable 해주기 고정된 이미지는 make exportable 해주고 이미지 같은 경우는 배경을 투명으로 의도한 게 아니라면 jpeg로 바꿔주기 유동적으로 변하는 이미지는 컨텐츠는 운영 업무에 속함으로 안 보내도 됨 3 로고나 아이콘 같은 경.. 공감수 0 댓글수 0 2021. 4. 21.
웹디자인 실습 모바일 서브 페이지(Feat. 스케치 심볼의 힘) - 웹디자인 입문 강좌 www.youtube.com/watch?v=JxxrQj8sXS4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=13&t=1s 복제후 이름바꾸고 공통되는 요소 빼고 삭제하기 공감수 0 댓글수 0 2021. 4. 21.
웹디자인 실습 모바일 메인 페이지 - 웹디자인 입문 강좌 www.youtube.com/watch?v=qB6UZdPu0Ag&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=12 - 일반적인 작업방식 모바일>테블릿>데스크탑 - mobile first 콘텐츠 (콘텐츠의 가독성) 복사 후 더블 클릭후 편집화면에서 사이즈 조절 adjust content on resize ■체크 메인화면으로 돌아와서 수정+사이즈 조절+배치하기 - 모바일 사이즈 만들기 1. a를 누르고 기종을 선택하기 2. view-show layout-layout setting 좌우에 margin 20씩 주기 → 총 40 빼주기 =>335px offset 0 주고 center 누르기 number of columns 4 또는 6 주기 gutter width 16px 주기.. 공감수 0 댓글수 0 2021. 4. 21.
시선강탈 웹 메인 배너 만드는 방법(feat. 포토샵) - 웹디자인 입문 강좌 www.youtube.com/watch?v=xb_yfjHj_RE&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=11&t=2s 시선강탈 웹 메인 배너 만드는 방법 - 어두운 배경에서 빛이 들어오는 효과 1. 원을 하나 그려서 검정색 채워주기 2. filter>render>lens flare (105mm prime 추천) 3. 레벨값을 줘서 테두리의 밝은 부분 경계를 없애주기 - 빛이 나오는 효과 1. 펜툴(shape)으로 모양을 그려주기 2. smart object로 바꿔주기 3. filter>blur gallery>field blur 4. 수치 알맞게 조절 (끝부분은 강하게!) 5. ok 버튼을 누름 6. 마스크를 씌우고 그라데이션과 붓으로 자연스럽게 경계를 지워주기 .. 공감수 0 댓글수 0 2021. 4. 21.
웹디자인 실습 PC 카테고리 페이지 - 웹디자인 입문 강좌 www.youtube.com/watch?v=ay7VHoa8tKs&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=10 - 카테고리페이지 헤더와 푸터는 그대로 사용됨 메인 배너에 비해 조금 더 작게 작업 simbol normal/active 서로 바꿔주기 공감수 0 댓글수 0 2021. 4. 18.
헤더, 배너, 섹션, 푸터 디자인 - 웹디자인 인문 강좌 #6 웹디자인 실습 PC 헤더 디자인 01 - 웹디자인 입문 강좌 www.youtube.com/watch?v=cCwj-xYYCM0&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=6&t=1s #7 웹디자인 실습 PC 배너 디자인 02 - 웹디자인 입문 강좌 www.youtube.com/watch?v=jmly8U6Eeuk&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=7 #8 웹디자인 실습 PC 섹션 디자인 03 - 웹디자인 입문 강좌 www.youtube.com/watch?v=D8XMY0fb2wQ&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=8 #9 웹디자인 실습 PC 섹션, 푸터 디자인 04 - .. 공감수 0 댓글수 0 2021. 4. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.