[UXUI Design] UXUI 디자인 입문_Chapter 1 #1 TASK ▼ 1주차 학습 목표 UX와 UI의 차이를 명확하게 이해 UX/UI 디자이너의 역할을 파악 디자인 가이드라인이 무엇인지 이해, 활용 방법을 익힘 UX/UI 변화와 최신 트렌드를 알아보기 #2 Learning process ▼ UXUI란 UI는 User Interface의 약자로, 제품과 사용자 사이에서 소통할 수 있도록 하는 실체적인 수단이나 매게체를 뜻함. UX는 User eXperience의 약자로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험. * 제품과 사용자 사이를 이어주는 것이 UX/UI ▼ 디자이너의 역할 UI디자이너는 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인 하는 것에 집중. 주업무 : 레이아웃, 색상, 크기와 정렬, 컴포넌트, .. [프로그래밍 #5]프로그래머의 세계 이해하기_코드잇 #1 프로그래밍의 다양한 분야1. 컴퓨터 사이언스의 기본 객체 지행 프로그래밍 알고리즘 자료구조2. 부가적인 컴퓨터 구조 운영체제 컴파일러 웹개발 데이터베이스 네트워크 #2 소프트웨어 공학▼ 소프트웨어로 제품/서비스를 만드는 방법에 대한 학문. (기획 → 제작 → 테스트 → 출시 → 사후관리) - 기획 : 어떤 것을 만들지 정하는 단계 - 개발 : 기획한 것을 만드는 단계 - 테스트 : 개발이 기획대로 잘 되었는지 확인하는 단계 - 배포 : 개발된 제품 / 서비스를 사용자가 사용하는 단계 - 유지/보수 : 출시된 서비스를 변화시키는 단계 #3 프로세스 관리1. 애자일(agile) : 결과물을 만들어 미리 확인하고 수정하며 진행하는 방식 -> 중간중간 사용하면서 발전시키기 때문에 기능.. [프로그래밍 #4] 프로그래밍 언어 이해하기_코드잇 #1 프로그래밍 언어 살펴보기프로그래밍 언어란?- 컴퓨터에게 어떠한 일을 해야하는 알려 주는 설명서가 프로그램.- 그 프로그램이 작성된 언어가 프로그래밍 언어. * 어떠한 계산 결과를 얻을 수 있도록 톱니바퀴를 움직이는 것으로도 해석 할 수 있음. * 다양한 언어들이 존재 -> JavaScript, Ruby, Python C++ 등등 #2 프로그래밍 언어를 분류하는 두 가지 기준프로그래밍 언어를 분류할 패러다임1. 객체 지향 프로그램 : 한 기능의 역할을 하는 객체별로 프로그래밍을 짜는 방향. ➢ 객체별로 코딩을 짜면 되니 일일이 전체를 검토할 필요 없이 해당 객체만 검토한다는 장점이 있음.2. 자료형 : 변수에 담길 데이터가 어떠한 타입인지 미리 정해 주는 것. ➢ 자료형을 정해주는 언어는.. [UI Design #1]UI 디자인 기초_코드잇 #1 UI 디자인 이해하기UI는 유저 인터페이스 (User Interface)의 줄임말- User : 사용자- Interface : 무언가를 하기 위한 도구 #2 디자인 툴 다루기레이어 패널 : 하나의 투명한 필름의 개념, 여러개 쌓을 수 있는 필름 같은 개념룰러(Rulers) : 피그마 내에서 가이드라인을 실행시키는 기능 #3 좋은 UI 디자인좋은 디자인에서는 같아야 하는 것이 있고, 달라야 하는 것이 있다.- 일관성 : 동일하게 지켜나가야 하는 것.- 위계질서 : 대비 or 달라야 하는 것. * 색상, 크기, 밝기 등 대비를 통해 좋은 UI를 만들 수가 있다. (시각적인 무게감 구분) [클론 디자인] 웹사이트 클론 디자인 #1 웹 서비스 선정 ▽ VOD 스트리밍 OTT Service ‘넷플릭스’ Main View 주로 OTT 서비스인 ‘넷플릭스’를 스마트 기기인 모바일앱 버전이 아닌 데스크탑 버을 이용한다. 자주 봐왔던 화면인 만큼 해당 서비스 화면을 따라 만들고 싶은 생각이 들어 이번 클론 디자인으로 택했다. #2 작업물 소개 첫 프로필 화면에서는 다른 정보와 방해되는 요소들이 없이 오로지 프로필 부분에서만 초점을 주었기 때문에 깔끔한 UI가 인상적이다. 메인화면에서는 Black & White 색상을 이용하여 배경과 콘텐츠들을 시각적으로 표현을 했고, 사용자가 알아야할 중요한 정보는 Red 색상을 통해 중요한 포인트들을 심어주었고 전체적으로 깔끔하고 버릴 것 없는 디자인이라는 것을 보여준 UI였다. #3 유저 플로우 해.. [서비스 분석] 이마트몰 앱 서비스 홈 화면 분석 #1 서비스 선정 ▼ 선정 이유 평소 내가 자주 사용하면서 UX가 뛰어나다고 생각했던 앱으로 생각을 해보니 이커머스와 SSG이 생각이 났다. 신세계 BI와 퀄리티 좋은 비쥬얼과 서비스가 한 곳에 모여 SSG이라는 브랜드를 론칭해 많은 도움이 될 것 같아 해당 어플을 선정해 보았다. ▼ 서비스 소개 SSG은 신세계그룹 산하 법인의 온라인 부문을 통합한 쇼핑몰과 이를 운영하는 기업이다. 해당 서비스를 쉽고 간편하게 새벽배송 및 익일배송으로 받아볼 수 있으며 **’공효진&공유’**의 TV광고로 많은 사람들에게 사랑 받고 있는 이커머스 서비스이다. #2 UI/UX 디자인 분석 ▼ 화면 구성 처음 이마트몰 앱을 실행하면 SSG의 아이덴티티가 느껴지는 노란색 색감에 메인 슬라이드 화면에는 인터랙션 영역으로 사용자와.. [Figma #3] 피그마로 디자인 템플릿 만드는 방법 피그마로 쉽게 보다 빨리 템플릿으로 UI디자인을 만들 수가 있다. 피그마 내에서 플러그인을 활용하면 쉽게 아이콘/UI를 불러올 수 있으며, 유료/무료를 통해 언제든지 고퀄리티로 제작이 가능하다. #1 Plug-in 불러오기 피그마 상단 툴바에서 'Resources'를 클릭하면 'Compoents, Plugins, Widgets' 탭에서 불러올 수가 있다. #2 자주 쓰이는 Plug-In ▼ Material Symbols 빠르게 UI디자인을 불러올 수 있는 플러그 ▼ Product Planner 차트, 도표 등 빠르게 플래너를 불러올 수 있는 플러그인 ▼ Charts 차트 디자인을 빠르게 불러올 수 있는 플러그인 ▼ Colof Palettes 최적의 컬러 매칭을 위한 팔레트 플러그 [Figma #2] 클릭하면 이동하는 피그마 프로토 타이핑 #1 프로토타입이란 프로토타입이란 본격적인 상품화에 앞서 성능을 검증 · 개선하기 위해 간단히 핵심 기능만 넣어 제작한 기본 모델. #2 디자이너에게 프로토 타이핑이 필요한 이유 디자이너는 다양한 직군과 협업하게 되는데 프로토 타이핑을 사용한다면 말보다는 명확한 이미지로 제시하기 때문에 효과적으로 전달할 수 있다. 스스로 사용해보는 것이기 때문에 디자이너 본인의 문제점을 발견해서 보완하기 좋다. #3 피그마 프로토타입이란 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것. a) 핫스팟(Hot Spot) - 파란색 기준이 되는 점, 인터랙션이 시작하는 위치. b) 커넥션(Connection)라인 - 핫스팟과.. 이전 1 2 3 4 다음
