jyoon dev log

Chapter1-1. 웹 표준의 개념 🍀 웹이란? 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간 🍀 웹 표준 W3C (World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’ 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법이다. 따라서 웹 표준에 맞추어 웹 페이지를 작성하면 어떤 브라우저를 사용하든 동일한 결과물을 얻을 수 있다. 🍀 웹 표준의 장점 유지 보수의 용이성 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다. 웹 호환성 확보 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에..

Figma로 프로토타입을 제작할 수 있다. 웹 사이트의 UI/UX를 분석할 수 있다. 웹 사이트에서 사용중인 UI 디자인 패턴을 발견할 수 있다. 웹 사이트가 컬럼 그리드 시스템을 사용하고 있는지 알아낼 수 있다. 웹 사이트가 피터 모빌의 UX 7요소들을 충족하고 있는지 분석할 수 있다. 웹 사이트의 user flow를 그려볼 수 있다. 웹 사이트가 제이콥 닐슨의 10가지 사용성 평가 기준을 충족하고 있는지 분석할 수 있다 UI/UX를 분석한 내용을 토대로 개선할 수 있다. 💡 UI 분석 컬럼 그리드 시스템(Column Grid System) margin : margin은 최소화 하여 많은 정보를 담는 동시에 답답해 보이지 않도록 적당한 margin을 두었습니다. column : 메인 페이지는 colum..

1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요하겠죠. 여기에 꼭 목적에 맞지 않더라도, 비실용적이라도 추가적인 기능을 제공하는지도 관련이 있습니다. 계산기의 디자인은 계산기의 기능 자체에는 영향을 주지 않지만, 심미적 기능을 제공한다고 판단합니다. 2. 사용성(Usable) : 사용하기 쉬운가? 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다. 기능이 아무리 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX를 제공하기 어렵습니다. 가능한 단순하면서 직관적이고 사용하기..

UI (User Interface, 사용자 인터페이스) UI는 사람들이 컴퓨터와 상호 작용하는 시스템이다. 컴퓨터와 상호 작용하기 위한 시스템에는 화면상의 그래픽 요소, 키보드, 마우스,스마트워치, 키오스크, 대중교통 터치스크린 안내판 등이 있다. GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경이다. 운영체제(Window, Mac OS)의 화면, 혹은 애플리케이션 화면이 있다. UX (User Experience, 사용자 경험) UX는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. UI와 UX의 차이점 UI는 누구나 빠르고, 편리하게 제품/서비스를 이용할 수 있도록 시각적으로 디자인된 부분 이다. 하지만 UX 디자인과는 다르게 사용자..

피그마 이용해서 인스타그램앱 클론하기 Figma Created with Figma www.figma.com 피그마는 포토샵의 웹 버전같다. 무거운 포토샵 프로그램을 이용할 때 보다 훨씬 가볍게 느껴지고 플러그인을 통해서 푸티지 이미지 가져오기도 편하다. 피그마 이전으로 돌아갈 수 X. 📌 컴포넌트란? 컴포넌트는 피그마에서 앱 설계 및 디자인 전반에서 버튼, 카드, 아이콘 등의 모든 디자인 요소를 일관되고 효과적으로 관리하는 기능입니다. 개발에서도 "컴포넌트"라는 개념이 존재한다. 회사마다 개발팀과 디자인팀에서 빠르고 쉽게 개발/프로토타이핑 작업이 가능하도록 미리 모듈 형식으로 독립된 컴포넌트를 만들어서 재활용하는 방식이다. 피그마에서 컴포넌트는 모든 디자인 요소를 일괄적으로 관리할 수 있도록 도와주는 기..