Web design42 픽셀과 DP px (pixel) 화면을 구성하는 기본 단위로, 스크린에 표현할 수 있는 가장 작은 점 하나라고 할 수 있다. 절대적 표시 단위라서 지정한 수치의 이상일 경우 깨져 보일 수 있다. dpi (dots per inch) 1인치에 들어가는 점들의 개수를 의미하며, 이를 dpi단위로 표현한다. 1인치 안에 72px가 들어가있다면 72dpi이다. 보통 웹이미지를 72dpi로, 인쇄물을 300dpi로 작업하는데 여기에서 '해상도(resolution)'라는 단어를 쓰게된다. 수치가 높을 수록 고해상도이므로 72dpi는 저해상도, 300dpi는 고해상도이다. dp (Density-independent Pixels) 밀도 독립적 픽셀이란 안드로이드 OS에서 정의한 논리적 픽셀이다. 기기의 밀도에 상관없이 물리적으로 거.. 2021. 10. 31. 벡터 그래픽 SVG 파일 저장 및 코드 변환 아이콘과 같은 벡터 이미지 사용을 위해서 SVG 파일로 저장하는 방법과, HTML에 사용하기 위해 코드로 변환하는 방법을 공유하고자 한다. SVG를 이해하기 위해 이미지 파일 형식에 대해서 간략히 알아보자. 벡터 VS 비트맵 벡터와 비트맵 모두 디지털 이미지를 저장하는 데 쓰이는 이미지 파일 포맷이다. 웹용 비트맵(Bitmap) 이미지 포맷은 픽셀(이미지를 구성하는 최소 단위) 격자를 사용하여 이미지를 나타낸다. 결과로 생성된 파일은 크기가 커져서 단일 해상도(흔히 저해상도)로 제한되기 쉽다. 따라서 다양한 색상을 가진 이미지를 만들 수 있지만 그만큼 용량이 커진다. 커진 이미지를 적용하더라도 화면 확대 시 이미지가 깨져 보일 수 있다. 반면에 벡터(Vector)는 이미지를 모양, 패스, 텍스트, 필터 .. 2021. 6. 26. [CSS] Position : Sticky CSS position 속성은 요소를 배치하는 방법을 지정한다. position의 속성값으로는 static, absolute, fixed, sticky가 있고, 각 속성의 배치 유형을 알고 사용하면 된다. Sticky의 경우 Position의 계산값(상속 과정에서 부모가 자식에게 물려주는 값)이 sticky인 요소이다. 평소에는 relative인 요소처럼 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록(위치의 기준점이 되는 부모 요소)이 자신의 플로우 루트(또는 스크롤 컨테이너)에서 지정한 특정 임계값을 넘으면 마치 fixed처럼 화면에 고정한다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제된다. 사용 예시 : See the Pen Sticky CSS by hyoeun (@hyonixk) .. 2021. 2. 20. [CSS속성] 이미지 제어 : object-fit과 object-position 지난 글에서 스크롤 메커니즘이 있어도 배경 이미지를 고정시킬 수 있는 background-size와 attachment의 속성을 살펴봤다. background-size와 attachment : 페이지 스크롤 시 배경 이미지 고정 background-size 배경 이미지의 사이즈를 지정한다. background-size에 대한 자세한 내용은 여기를 참고 background-attachment 배경 이미지의 위치가 고정되어 있는지의 여부를 지정한다. scroll : 내.. hyoni-k.tistory.com 이번 글에서는 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고자 할 때 필요한 CSS 속성인 object-fit, object-position에 대해 알아보고자 한다. object-fit : 이.. 2021. 2. 20. [CSS속성] 텍스트를 강조하는 방법 텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다. 1. 텍스트의 두께를 상대적으로 무겁게 하여 강조 font-weight: bold; 2. 텍스트의 색상으로 강조 color: red; 3. 텍스트의 배경에 색상을 주어 강조 background-color: #fdd000; 4. 텍스트에 언더라인을 주어 강조 text-decoration: underline; text-decoration: underline dotted blue; (underline 속성에 대한 학습은 여기(MDN)를 참고) 텍스트에 단순히 text-decoration: underline으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에.. 2020. 12. 3. UX 디자인 프로세스와 리서치 방법 UX 디자인 프로세스의 기본 모델: 더블 다이아몬드UX 디자인 프로세스의 기초가 되는 더블 다이아몬드 모델은 문제 파악(Problem)과 해결책 도출(Solution)이 반복되는 과정을 보여줍니다. 이 모델은 네 단계로 구성됩니다.1. Discover (발견)2. Define (정의)3. Develop (개발)4. Deliver (제공)1. Discover (발견) 단계이 단계에서는 사용자 리서치를 통해 문제를 파악합니다. 리서치 방법은 크게 두 가지로 나뉩니다.정량적 리서치 (Quantitative Research)- 설문 조사, 로그 분석 등을 통한 수치화 가능한 데이터 수집- 대규모 표본을 대상으로 간접적인 조사 수행정성적 리서치 (Qualitative Research)- 개인 또는 소수 그룹 대상.. 2020. 11. 9. 웹표준 및 웹접근성/유효성 검사하기 웹 접근성 진단을 위한 프로그램 및 사이트 웹 접근성 진단을 위한 프로그램 및 사이트를 소개합니다! 1. Colour Contrast Analyser (CCA)텍스트와 그래픽/배경 이미지의 명도 대비를 체크해주는 프로그램스포이드 도구를 사용하여 두 색상의 명암비를 쉽게 결정할 수 있는 TPGi의 무료 색상 대비 검사기 도구WCAG (웹 콘텐츠 접근성 지침)- WCAG 2.0 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1의 명암비 필요 - WCAG 2.1은 그래픽 및 사용자 인터페이스 구성 요소에 대해 최소 3:1의 명암비 필요- WCAG 레벨 AAA는 일반 텍스트의 경우 최소 7:1, 큰 텍스트의 경우 4.5:1의 명암비 필요 Colour Contrast Analyser (.. 2020. 10. 23. CSS Preprocessor, SASS, SCSS CSS Preprocessor(전처리기) CSS 전처리기는 CSS가 동작하기 전에 사용하는 기능을 하며, 전처리기의 종류로는 SASS, LESS, Stylus 등이 있다. (참고로 SASS와 LESS와 같은 컴파일 언어를 개발하기 위해 사용하는 - CSS 도구 개발을 위한 프레임워크 - PostCSS도 있다.) CSS 전처리기는 CSS 문법과 유사하지만 표준 CSS보다 많은 기능을 사용하기 때문에 보다 편리하게 작성할 수 있다. 하지만 웹에서 직접 동작하지 않기 때문에, 작성한 전처리기는 웹에서 동작 가능한 표준 CSS로 컴파일해야 한다. 즉, 전처리기로 작성하고 CSS로 컴파일해서 동작시킨다. (컴파일의 경우 전처리기의 종류마다 방법이 다소 다름) SASS와 SCSS의 차이점? SCSS는 CSS구문과 .. 2020. 10. 15. 모바일 사용자 인터페이스 : 터치 제스처 및 영역 터치 제스처 사용자 인터페이스에서 터치 제스처와 터치 영역은 모바일 기기 사용성의 핵심 요소입니다. 디자이너와 개발자는 사용자의 직관적인 상호작용을 위해 제스처를 이해하고 최적화해야 합니다.터치 제스처의 종류- 탭(Tap) : 화면을 짧고 가볍게 터치하는 기본 동작- 더블 탭(Double Tap) : 빠르게 두 번 연속 터치- 프레스(Press) : 화면을 2초 이상 길게 누르는 동작- 스와이프(Swipe) : 화면을 일정 거리 밀어내는 동작- 플릭(Flick) : 빠르게 스크롤하는 동작- 핀치(Pinch) : 두 손가락으로 확대/축소하는 동작- 팬(Pan) : 손가락을 떼지 않고 계속 드래그하는 동작- 로테이트(Rotate) : 두 손가락으로 회전하는 동작터치 타겟 크기 기준 - 안드로이드: 48 x .. 2020. 9. 16. UI/UX 용어 : 실무에서 꼭 알아야 할 핵심 용어 가이드 UI/UX 정의UX 디자인이 제품이나 서비스의 전체적인 사용자 경험 및 설계를 다룬다면, UI 디자인은 그 경험을 시각화하는 구체적인 인터페이스를 다룹니다. 두 분야는 밀접하게 연관되어 있으며, 성공적인 제품 개발을 위해서는 UX와 UI가 조화롭게 설계되어야 합니다.UI (User Interface) : 사용자 인터페이스사용자가 디지털 제품과 상호작용하는 시각적 접점입니다. 버튼, 아이콘, 색상, 폰트 등 사용자가 직접 마주하는 모든 시각적 요소를 포함합니다. UI 디자이너의 역할은 서비스나 제품을 사용자가 어떻게 이용하도록 시각적으로 구현할지 고민하고 디자인(톤앤무드, 레이아웃, 컬러, 타이포 등)하는 것입니다.UI 디자이너의 역할 : 사용자가 제품이나 서비스와 상호작용하는 시각적 접점을 설계하는 것입.. 2020. 9. 15. 반응형 레이아웃 그리드 : 머티리얼 디자인 본 글은 구글에서 제시하는 머티리얼 디자인 가이드 중 반응형 레이아웃 그리드의 대부분의 내용을 옮긴 글이며, 일부 편집과 재해석이 있을 수 있습니다. 지난 글에서는 반응형 웹 디자인/레이아웃을 위한 미디어쿼리와 뷰포트에 대해서 알아봤는데, 이번 글에서는 머티리얼 디자인 가이드로 '반응형 레이아웃 그리드'에 대해 알아보고자 한다. 레이아웃 그리드 구성 요소 : Columns, Gutters, Margins 레이아웃 그리드는 ①컬럼(열), ②거터, ③여백으로 이루어져 있다. ① Columns (컬럼/열) 컬럼은 컨텐츠를 담는 영역이다. (컨텐츠 배치 시 거터를 포함 또는 불포함) ㅡ 컬럼 너비 : 고정 값이 아닌 백분율로 정의하여 컨텐츠가 다양한 화면 크기에 유연하게 적응할 수 있도록 한다. ㅡ 컬럼의 수 .. 2020. 9. 11. 모바일 앱의 종류 네이티브 앱 (Native App) 네이티브 앱은 모바일 기기에 최적화된 언어로 개발된 앱으로, 사용자는 App Store를 통해 다운받아 설치하여 사용한다. 장점 모바일에 설치되어 성능이 빠르고 안정적이며, 최적화된 개발 및 업데이트가 가능하다. 모바일 기기의 유틸리티를 사용하기 때문에 GPS, 연락처, 카메라 등 다양한 기능에 접근이 자유롭다. 앱스토어 및 구글플레이에서 쉽게 찾아 볼 수 있다. 애플이나 구글은 자체 툴킷(sdk)과 인터페이스 구성 요소를 제공한다. 단점 Android, iOS 각각의 개별적으로 개발이 필요하므로 시간과 비용이 많이 든다. 정기적인 업데이트가 필요하다. (Android, iOS 각각의 승인 필요, iOS 승인 오래걸림) 앱스토어 및 구글플레이는 인앱결제에 대한 수수료 .. 2020. 9. 10. 반응형 웹 디자인/레이아웃 : 미디어쿼리와 뷰포트 반응형 웹 디자인은 별도의 특별한 기술이 아니다.웹 페이지를 다양한 디바이스의 해상도 및 규격에 맞게 레이아웃을 유연하게 적용(반응)하도록 하기 위해 알아야 할 사항이 있을 뿐이다. 반응형 웹을 제작하기 위해 알아야 할 사항으로는 반응형 이미지 및 타이포그래피 개념과 CSS Media Query(반응형 디자인의 핵심적인 구성요소)라고 할 수 있을 것 같다. 미디어 쿼리 미디어 쿼리는 미디어 유형과 화면 해상도, 뷰포트의 너비 등에 따라 웹이나 앱의 스타일을 수정할 때 사용한다. 미디어 쿼리를 한다는 것은 웹 브라우저에게 질의를 던지는 것이다. 모바일 너비를 640px, 데스크톱 너비를 1024px로 한다는 가정하에 "현재 브라우저 너비는 640px이 맞습니까?" 질의를 던지며 뷰포트가 640px이.. 2020. 8. 21. 길이 "단위"에 대하여 본 글은 MDN의 자료를 보고 스터디하며 작성했습니다. 지난 글에서 상대 길이 단위인 em, rem에 대해 알아봤는데, 이번 글에서는 길이 단위들을 간략히 정리한다. em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 �� hyoni-k.tistory.com 절대 길이 단위는 그 어떤 것(환경이나 요소)에도 영향을 받지 않고 항상 동일하게 그대로 유지된다. css에서 px을 사용하는데 px를 제외한 나머지 단위들은 보통 인쇄에서 유용하게 사용된다. 반면에 상대 길위 단위는 root 요소의 폰트 크기나 viewport(사용.. 2020. 8. 13. em, rem : 유연하게 반응하는 상대적인 길이 단위 본 글을 통해 em, rem은 대략 무엇이고 em, rem을 px 단위로는 어떻게 되는지 알 수 있습니다.본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다. 보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 위해 상대적인 길이 단위가 아닌 절대 길이 단위인 px을 자주 사용한다. 절대 길이 단위는 편리하지만 (목적에 따라) 사이즈가 제각각인 여러 디바이스에서 어떻게 보일지 생각해 볼 필요가 있다. 다양한 디바이스 및 브라우저의 스크린 사이즈에 대응하기 위해 반응형으로 작업한다면 상대적인 길이 단위로 사이즈를 지정해야 할텐데 이때 em, rem 등을 사용한다.(상대 길이 단위로는 em, ex, rem, ch, 1h, vw, .. 2020. 8. 13. 이전 1 2 3 다음 반응형
