본문 바로가기

반응형

웹 개발 알아두기/웹 디자인

(7)
스타일 라이브러리 - 테일윈드 테일윈드는 부트스트랩과 같은 스타일 라이브러리입니다. 부트스트랩처럼 클래스명으로 스타일을 지정하지만 CSS 고유 스타일 속성 명칭과 유사한 구조를 가지고 있어 CSS 지식이 있으면 빨리 배울 수 있는 장점이 있습니다. 테일윈드 설치하기 프로젝트 콘솔에 아래 명령어를 실행 npm install -D tailwindcss npx tailwindcss init 생성된 테일윈드 구성 파일에 아래 코드추가 content: ["./src/**/*.{html,js}"] CSS파일에 아래 코드 추가 @tailwind base; @tailwind components; @tailwind utilities; 플러그인 사용하기 테일윈드의 다른 장점은 다양한 플러그인을 사용할 수 있다는 점입니다. 데이지 유아이 프로젝트 콘솔에..
디자인에서 색은 너무 중요한 요소이죠. 색에 대한 기본이론과 활용가능한 툴들을 알아볼까요? 색의 이론 색의 이론이란 색과 색의 조합에 대해 사람이 느끼는 감정에 관한 이론으로 이를 설명하기 위해 원색인 빨강, 파랑, 노랑과 이의 조합으로 만들어진 주황, 보라, 초록을 담은 동그란 판을 활용합니다 (뉴턴이 개발했다고 하네요). 참고로, 원색은 다른 색의 조합으로 만들 수 없습니다. 용어들 먼저, 색의 이론과 관계된 용어들을 먼저 볼까요 ▶ 색조 (Hue) 기본이 되는 여섯 가지 색 빨강, 주황(오렌지), 노랑, 초록, 파랑, 보라의 고유한 색을 의미합니다. ▶ Tint 기본이 되는 여섯 가지 색 빨강, 파랑, 노랑, 주황, 보라, 초록에 흰색을 가미한 정도를 의미합니다. ▶ 음영 (Shade) 기본이 되는..
Add to Home screen (A2HS) 거의 모든 브라우저에서 제공하는 기능으로 웹앱을 설치할 수 있게 해 줍니다. 설정방법 모바일과 데스크톱의 설정 방법은 같으나 설치에서 조금 차이가 있는데요 먼저 설정방법을 보겠습니다. 설정방법은 간단한데요. 먼저, manifest file을 만듭니다 (root 폴더에 설치 권장). 이때, .webmanifest 또는 .json 연장자를 사용합니다. example.webmanifest 또는 example.json { "background_color": "red", // 배경색이 들어가는 화면에서 제공됨 "description": "test", "display": "fullscreen", "icons": [ // 브라우저 아이콘 { "src": "icon/fox-icon.png", "sizes": "192x..
Web app manifests 웹애플리케이션 정보를 제공하는 파일로 웹애플리케이션 다운로드와 표시할 정보를 담고 있습니다. 참고 Web app manifests | MDN Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device's homescreen without an app store. Unlike regular web apps with simple homescreen links or bookmarks, PW developer.mozilla.org
반응형 디자인 (responsive design) 반응형 디자인은 하나의 웹사이트의 콘텐츠가 화면의 크기, 디바이스의 종류나 해상도와 관계없이 자연스럽게 표시되도록 하는 설계방식으로 과거와 달리 웹사이트 접근을 위해 사용하는 디바이스가 데스크톱에 국한되지 않는 요즘 웹사이트 제작 시 반드시 고려되어야 하는 요소 중에 하나가 되었습니다. 반응형 웹사이트를 만드는 방식은 아래와 같이 크게 두 가지로 나뉩니다. 1. mobile first design 모바일 화면을 먼저 구성하고 점차 큰 디바이스들의 화면에 맞게 콘텐츠를 늘려가는 방식 2. desktop first design 데스크 톱 화면을 먼저 구성하고 점차 작은 디바이스들의 화면에 맞게 콘텐츠를 줄여가는 방식 반응형 웹사이트 제작 시 활용 가능한 것들 1. 상대단위 웹사이트의 스타일을 담당하는 CSS..
User Experience (UX) UX (User Experience)는 사용자가 제품을 접하면서 갖게 되는 느낌을 의미합니다. UX 디자인은 이러한 유저의 경험이 긍정적인 경험이 될 수 있도록 하는데 초점을 둡니다. 사용자와 인터페이스의 소통이 가장 중요한 웹디자인의 특성상 UX는 UI와 밀접한 관계를 가지고 때로는 혼용되어 사용되는데요. UX와 UI는 모두 쉽고 편리하게 사용할 수 있는 웹사이트를 사용자에게 제공하는 것을 목적으로 하는 점에서는 동일하나 UX는 사용자와 Interface의 관계에 초점을 두는 UI와 달리 보이지 않는 모든 부분까지 고려한다는 점에서 UI를 포함하는 개념입니다. 참고 What is User Experience (UX) Design? What is User Experience (UX) Design? Use..
프로그레시브 웹 앱 프로그레시브 웹앱은 웹과 앱의 장점을 합친 애플리케이션입니다. 두 플랫폼의 장점을 호환하고 네트워크가 없는 환경에서도 애플리케이션을 구동할 수 있게 하기 위해 service worker, cache, web storate, indexedDB 등 다양한 기술을 활용합니다. 프로그레시브 웹앱인지 아닌지를 구분하는 기준은 아래와 같습니다. 모바일 화면과 웹 화면 모두에서 구동 가능한 반응형 애플리케이션 일 것 네트워크에 연결되지 않아도 애플리케이션의 모든 기능을 사용 가능할 것 Web push API, Notifications API 등일 사용하여 업데이트 알림 등으로 사용자가 해당 애플리케이션을 사용할 수 있도록 소통이 가능할 것 전용 아이콘을 통해 애플리케이션을 사용 가능할 것 애플리케이션 설치 없이 UR..

728x90