본문 바로가기
반응형

분류 전체보기276

[UX/UI Design] 2단계: Figma 기본 사용법 익히기 이제 2단계로 넘어가서 Figma 기본 사용법 익히기를 진행하겠습니다. 각 소주제를 하나씩 다루면서 상세히 설명드리겠습니다.2단계: Figma 기본 사용법 익히기학습 목표:Figma 인터페이스 이해와이어프레임 제작 방법 배우기프로토타입 제작세부 학습 내용:1. Figma 인터페이스 이해Figma는 웹 기반의 협업 디자인 도구로, UI/UX 디자이너들 사이에서 널리 사용되고 있습니다. Figma를 처음 사용할 때 이해해야 할 주요 인터페이스 요소를 소개하겠습니다.Figma 설치 및 로그인Figma 웹사이트 방문: Figma 공식 웹사이트에 방문하여 회원가입을 진행합니다.Figma 데스크톱 앱 설치: 웹에서 사용 가능하지만, 데스크톱 앱을 설치하면 더 원활하게 사용할 수 있습니다.Figma 인터페이스 요소T.. 2024. 6. 8.
[UX/UI Design] 1단계: UX/UI 디자인의 기본 개념 이해 1단계: UX/UI 디자인의 기본 개념 이해학습 목표:UX와 UI의 차이점 이해사용자 중심 디자인 원칙 배우기디자인 사고 프로세스 이해세부 학습 내용:1. UX와 UI의 차이점 이해UX (User Experience): 사용자 경험을 의미하며, 사용자가 제품이나 서비스를 사용할 때 느끼는 모든 경험을 포함합니다. UX 디자이너는 사용자 리서치, 사용자 흐름 설계, 사용성 테스트 등을 통해 사용자에게 최적의 경험을 제공하는 것을 목표로 합니다.UI (User Interface): 사용자 인터페이스를 의미하며, 사용자가 제품이나 서비스와 상호작용하는 시각적 요소를 디자인합니다. UI 디자이너는 버튼, 아이콘, 레이아웃, 타이포그래피 등 시각적 요소를 설계합니다.2. 사용자 중심 디자인 원칙사용자 중심 디자인.. 2024. 6. 8.
[UXUI Design] UX/UI Design 학습 과정 단계별로 UX/UI 디자인을 학습하고 문서 작성법도 배우려면 체계적으로 접근하는 것이 중요합니다. 아래는 단계별 학습 계획입니다.1단계: UX/UI 디자인의 기본 개념 이해학습 내용:UX와 UI의 차이점 이해하기사용자 중심 디자인 원칙 배우기디자인 사고 프로세스 이해학습 자료:책: "Don't Make Me Think" by Steve Krug, "The Design of Everyday Things" by Don Norman온라인 강의: Coursera, Udemy, LinkedIn Learning2단계: Figma 기본 사용법 익히기학습 내용:Figma 인터페이스 이해와이어프레임 제작 방법 배우기프로토타입 제작학습 자료:Figma 튜토리얼: Figma 공식 튜토리얼YouTube 강의: 다양한 Figm.. 2024. 6. 8.
[UXUI Design] UX/UI Design 학습 방법 1. 기본 개념 이해하기UX (User Experience): 사용자 경험을 디자인하는 것을 의미합니다. 사용자가 제품이나 서비스를 사용하는 동안 느끼는 모든 측면을 포함합니다.UI (User Interface): 사용자 인터페이스를 디자인하는 것을 의미합니다. 제품이나 서비스와 상호작용하는 데 사용되는 시각적 요소를 포함합니다.2. 학습 자료 찾기책: "Don't Make Me Think" by Steve Krug, "The Design of Everyday Things" by Don Norman온라인 강의: Coursera, Udemy, LinkedIn Learning에서 UX/UI 디자인 강의를 찾아보세요.블로그 및 웹사이트: Medium의 UX 관련 블로그, UX Design.cc, Smashin.. 2024. 6. 8.
[Javascript] Javascript 웹 개발 필수 개념 JavaScript로 프론트엔드 개발을 하려고 할 때 중요한 개념들을 잘 이해하고 있어야 웹 애플리케이션을 효율적이고 효과적으로 개발할 수 있습니다. 1. DOM(Document Object Model) 조작1.1 DOM 선택자HTML 문서의 요소를 선택하고 조작할 수 있습니다.getElementById: 특정 ID를 가진 요소를 선택합니다.getElementsByClassName: 특정 클래스를 가진 요소를 모두 선택합니다.getElementsByTagName: 특정 태그 이름을 가진 요소를 모두 선택합니다.querySelector: CSS 선택자를 사용하여 첫 번째 요소를 선택합니다.querySelectorAll: CSS 선택자를 사용하여 모든 요소를 선택합니다.예시:let element = docu.. 2024. 6. 8.
[Javascript] Javascript 규칙 JavaScript 코딩 컨벤션, 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성, 유지보수성, 일관성이 크게 향상됩니다. 아래에 JavaScript를 작성할 때 지켜야 할 주요 컨벤션과 규칙을 정리했습니다.JavaScript 코딩 컨벤션1. 들여쓰기와 공백들여쓰기: 일반적으로 2칸 또는 4칸의 공백을 사용합니다. 일관된 들여쓰기를 유지합니다.공백: 연산자 주변, 코드 블록 사이, 함수 인수 목록 등에 적절한 공백을 사용하여 가독성을 높입니다.// 2칸 들여쓰기 예시function add(a, b) { return a + b;}// 공백 사용 예시let sum = add(2, 3);if (sum > 5) { console.log('Sum is greater than 5');}2. 중괄호와 줄바꿈중.. 2024. 6. 8.
[Javascript] Javascript 예제(심화) - 수정 UI 디자인을 개선하고, 코드에서 수정된 부분에 대한 메시지를 추가하겠습니다.개선된 UI 디자인HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; ali.. 2024. 6. 8.
[Javascript] Javascript 예제(심화) JavaScript의 고급 기능을 사용하여 할 일 목록(To-Do List) 애플리케이션을 구현해 보겠습니다. 이 예제에서는 할 일 추가, 삭제, 편집, 필터 기능을 포함하며, LocalStorage를 사용하여 데이터를 저장합니다.프로젝트: 고급 To-Do List 애플리케이션HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: fl.. 2024. 6. 8.
[Javascript] Javascript 심화 1단계: ES6+ 기능1.1 let과 constlet과 const는 블록 스코프를 가지는 변수 선언 키워드입니다.let: 재할당이 가능한 변수 선언.const: 재할당이 불가능한 상수 선언.예시:let message = 'Hello, JavaScript!';message = 'Hello, ES6!';console.log(message); // 'Hello, ES6!'const pi = 3.14;console.log(pi); // 3.14// pi = 3.14159; // 오류 발생: 상수 재할당 불가1.2 화살표 함수화살표 함수는 더 간결한 함수 표현식을 제공합니다.예시:// 전통적인 함수 선언function add(a, b) { return a + b;}// 화살표 함수const add = (a,.. 2024. 6. 8.
[Javascript] Javascript 실습 JavaScript를 사용하여 할 일 목록(To-Do List) 애플리케이션을 만들어 보겠습니다. 여기서는 항목을 추가하고 삭제할 수 있는 기능을 구현하겠습니다.HTML 코드 To-Do List Add CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.todo-container { background-color: #fff; .. 2024. 6. 8.
반응형

티스토리툴바