티스토리

야생가오리

검색하기

블로그 홈

야생가오리

day4fternoon.tistory.com/m

avocado8 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

11주차 7. Design System과 UI PrototypingDesign System과 UI prototyping의 개념: UI디자인의 구체적인 결과물 제작에 관한 방법이자 도구Design system- 재사용 가능한 구성요소의 조합- 스타일 가이드를 포함하는 UI 구서용소의 집합- 불필요한 디자인의 중복성 감소- 시각적 일관성 부여- 제품에서 공유되는 철학이나 어워드를 대규모로 관리ex) 구글의 material design, IBM의 carbon designAtomic Design : 디자인시스템이 갖고 있는 계층적 구성요소- Atoms(낱개의 이미지, 아이콘...) - Molecules(버튼이 있는 필드...) - Organisms (디자인 패턴과 유사) - Templates - pages디자인 시스템이.. 공감수 1 댓글수 0 2024. 12. 8.
9주차 3. 인터랙션과 사용성1. 인터랙션의 종류Interaction : 상호작용, 관계, 소통, 반응- 정보통신, 디자인에서: 인간-컴퓨터 상호작용(HCI)컴퓨터를 인간에게 좀더 쉽고 쓸모있게 함으로써 인간과 컴퓨터 간의 상호작용 개선 Interaction의 방법1) Touch interaction감압식: 누르는 힘을 감지해서 위치 탐색- 손가락이 아닌 비도체로도 작동 가능- 느린 반응속도, 멀티터치 기술 적용 어려움정전식: 전도체가 닿을 때 전류의 변화 인식- 전도체만 인식해 오작동 가능성 낮음, 빠른 반응속도, 선명한 액정, 멀티터치- 높은 소비전력, 높은 제조단가, 두꺼운 장갑 등 불가Multituch Interface- tap / press(hold) / double tap / flick / drag-.. 공감수 2 댓글수 0 2024. 11. 23.
8주차 PART 5. 컴포넌트 & 배리언츠 적용하기01 컴포넌트로 동일한 형태를 반복해서 사용하기컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용 가능 반복해서 사용되는 요소는 컴포넌트로 만들어 관리하면 효율적이고, 모든 요소를 한번에 편집할 수 있어 유지보수가 쉬움 1) 메인 컴포넌트와 인스턴스 컴포넌트 생성하기메인 컴포넌트: 가장 먼저 생성한 컴포넌트. 인스턴스 컴포넌트의 기본 속성을 정의하는 역할을 하며, 디자인에 직접 사용하지 않고 별도 페이지에서 관리하는 것이 일반적임 인스턴스 컴포넌트: 메인 컴포넌트의 복제본. 디자인에 직접 사용되며, 메인 컴포넌트와 속성이 동기화되어 있음 2) 인스턴스 컴포넌트의 속성 변경하기 3).. 공감수 2 댓글수 1 2024. 11. 17.
7주차 PART 4. 피그마의 꽃, 오토 레이아웃 살펴보기01 오토 레이아웃 구성요소 알아보기1) 오토 레이아웃 생성- 오브젝트 선택한 상태에서 shift + a ctrl + d로 복제하면 프레임도 같이 따라 늘어남새 오브젝트를 끼워넣거나 기존 오브젝트를 빼는 것도 가능방향키로 오브젝트끼리의 순서 변경도 가능 2) 방향에 따라 오브젝트 배열하기수직 / 수평 / Wrap으로 정렬 가능wrap은 수평방향만 적용됨. 상위 컨테이너 크기에 따라 내부 오브젝트 자동 줄바꿈 3) 간격 설정하기오브젝트 간 간격 조절 가능하나의 프레임 안에 있는 모든 오브젝트는 같은 간격을 가짐wrap에서는 가로/세로 간격 따로 설정 가능 4) 패딩 - 오브젝트와 프레임 사이 크기 조절하기상하좌우 방향 설정 가능. Ctrl을 누르고 패딩을 .. 공감수 3 댓글수 3 2024. 11. 9.
4주차 교재 https://product.kyobobook.co.kr/detail/S000211177351?utm_source=google&utm_medium=cpc&utm_campaign=googleSearch&gad_source=1&gclid=Cj0KCQjwgrO4BhC2ARIsAKQ7zUlZb_9iXcHK2XBm2xmWADWQJwpqZC7W7WMheSwUpzZelq7RUtq4XWQaAuFVEALw_wcB 실전 피그마 | 김범용 - 교보문고실전 피그마 | 실무 프로젝트를 따라 직접 만들며 배우는, 스무(SMU)의 실전 피그마UX/UI 디자인 툴 1위 피그마는 UI/UX 디자이너, 서비스 기획자를 위한 협업에 특화되었다. 현업 디자이너로 활동하product.kyobobook.co.kr PART 1. 원포인트 .. 공감수 2 댓글수 1 2024. 10. 14.
3주차 2주차 과제가상 설문조사 작성하기https://docs.google.com/forms/d/e/1FAIpQLSdl5b17mIROEgBKS9Ynw5FackTAGj69KM6JEet74jG3mvyaCw/viewform?usp=sf_link 사용 설문" data-og-description="부모님, 큐레이터 등 다른 사람의 설명을 들으며 감상하는 것" data-og-host="docs.google.com" data-og-source-url="https://docs.google.com/forms/d/e/1FAIpQLSdl5b17mIROEgBKS9Ynw5FackTAGj69KM6JEet74jG3mvyaCw/viewform?usp=sf_link" data-og-url="https://docs.google.com/form.. 공감수 14 댓글수 0 2024. 10. 11.
2주차 4. 설문과 통계 설문- 가장 흔하게 접할 수 있는 방법. 가장 쉽게 또는 만들 수 있는 방법- 디자인 조사 방법 중 가장 정량적 -> 통계를 알아야 함. - 미리 구조화되어 있는 설문지나 면접을 통해 사회현상에 관한 자료를 수집, 분석하는 연구 방법 잘 수행된 설문조사- 중요한 결정을 내리는 데 사용. 사람들의 의견과 행동양상에 대한 명확한 수치 제공- 명료한 수치, 벤치마크, 이유 확보, 응답자들에게 의견 표명 기회 제공 설문조사가 적합한 경우- 명확해진 문제, 의식적인 문제에 적합 -> 인터뷰 or 관찰과는 다름.- 얼마나 많은 사람들이 의견에 동의하는지 알아볼 때 적합=> 설문의 장점: 객관성 / 단점: 생생함(주관적인 느낌의 차이)과 유연함의 결여 설문문한 개발과 설문지 제작1) 설문이 적합한 .. 공감수 8 댓글수 4 2024. 10. 4.
1주차 케이묵 수강신청 인증 1 . UX 디자인 프로젝트 이해하기UX 디자인 프로세스- 더블 다이아 모델(DDM)이 가장 광범위적으로 사용 : 프로젝트 내적인/하위 내용은 이해하기 쉽지만 프로젝트 상위/메타적인 이해는 누락될 가능성 O- 프로젝트를 통해서 도달할 기업 차원의 목표, 기대효과 파악- 변형된 더블 다이아 모델ㄴ 이해하기 프로세스 추가ㄴ 어느 정도의 규모로 진행할지, 누가 의사결정권자/이해관계자인지 파악, 산업/기업/비즈니스에 대한 이해 선결 -> 효율적 전략설정 가능 산업분석산업 : 인간의 생활을 경제적으로 풍요롭게 하기 위해 재호나 서비스를 생산하는 활동/조직top-down approach : 경제분석 -> 산업분석 -> 기업분석Bottom-up approach : 기업 -> 산업 -> 경제 기업.. 공감수 6 댓글수 3 2024. 9. 25.
9주차 4. Classes and Interfaces4.0 Classesclass Player { constructor( private firstName: string, //private는 JS에서 사용되지 않음 private lastName: string, public nickname: string ) {}}const cado = new Player("cado", "babo", "카도");cado.firstName //오류 - firstName은 privatecado.nickname //오류x abstract class(추상 클래스) : 다른 클래스가 상속받을 수 있는 클래스추상 클래스는 인스턴스를 만들 수 없음abstract class User { con.. 공감수 0 댓글수 0 2024. 5. 18.
8주차 1. Introduction1.5 Why not JavaScriptWhy TypeScript? : Type Safety타입 안정성 - 코드에 버그 감소, 런타임 에러 감소, 더 나은 개발자 경험과 생산성 자바스크립트- 매우 유연한 언어. 에러를 보여주지 않으려고 노력함[1, 2, 3, 4] + false -> '1,2,3,4false' 와 같이 이상한 코드를 써도 에러가 나지 않음 2. Overview of Typescript2.0 How Typescript WorksTypescript : a strongly typed programming language that builds on Javascript.브라우저는 자바스크립트를 이해하므로 타입스크립트는 자바스크립트로 컴파일된다.TS는 변환 전 먼저 코드를.. 공감수 0 댓글수 1 2024. 5. 11.
5주차 6. 리액트 라우터 6-1. 처음 만나는 리액트 라우터 URL이란? 인터넷에서 자원(웹 브라우저가 이해할 수 있는 모든 형태의 데이터)의 위치. 웹 브라우저가 특정 웹서버에 원하는 자원을 요청할 때 사용 구성: 통신프로토콜 - 도메인(호스트, 웹 서버 이름) - 경로 - 쿼리 매개변수 - 프레그먼트 브라우저는 프로토콜/도메인/ 을 도메인에 요청하고, 서버는 해당 경로헤 해당하는 자원을 HTTP 프로토콜 사용해 응답 location 객체 href: 주소창에 입력된 URL 전체 문자열을 얻거나 다른 URL을 프로그래밍으로 설정할 때 사용 protocl: URL의 프로토콜 문자열을 얻고 싶을 때 사용(마지막 콜론:도 포함) host: 도메인과 포트번호가 결합된 문자열 얻을 때 pathname: / 문자 뒤 경.. 공감수 0 댓글수 0 2024. 4. 19.
4주차 5. 상태 관리와 리덕스 패키지 5-1. 리덕스 기본 개념 이해하기 리덕스와 리덕스 관련 필수 패키지 플럭스(flux) : 앱 수준 상태, 즉 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법 리덕스: 플럭스 설계 규격을 준수하는 오픈소스 라이브러리 앱 수준 상태 알아보기 앱 수준 상태(app-level states) : 앱을 구성하는 모든 컴포넌트가 함께 공유할 수 있는 상태 - Provider 컴포넌트와 store 속성 import { Provider as ReduxProvider } from 'react-redux'; - 리덕스 저장소와 리듀서, 액션 알아보기 타입스크립트 언어로 리덕스 기능을 사용할 때는 먼저 다음처럼 앱 수준 상태를 표현하는 AppState와 같은 타입을 선언해야 함.. 공감수 0 댓글수 2 2024. 4. 12.
3주차 3장: 컴포넌트 CSS 스타일링 3-1. 리액트 컴포넌트의 CSS 스타일링 부트스트랩 사용하기 부트스트랩(bootstrap) : CSS 프레임워크 public 폴더의 index.css에 부트스트랩 cdn 붙여넣어 사용 부트스트랩 컴포넌트 예시 리액트 함수형 컴포넌트로 사용하기 위해 공식문서의 form에서 for->htmlFor, class->className, input 태그 닫기의 수정이 필요하다. export default function Bootstrap() { return ( Email address We'll never share your email with anyone else. Password Check me out Submit ) } material icon 사용하기 @import 방식은 .. 공감수 0 댓글수 0 2024. 4. 5.
2주차 교재 https://product.kyobobook.co.kr/detail/S000212754474 Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 전예홍 - 교보문고 Do it! 리액트로 웹앱 만들기 with 타입스크립트 | 프런트엔드 개발자 채용 공고에서 인기 있는 자격 요건은 모두 갖췄다! 최신 웹 개발 트렌드를 반영하고 실무 코드로 가득 채운 ‘리액트 전문서 product.kyobobook.co.kr 기존 교재로 예정되어 있던 의 절판 이슈로 개정판 사용함 1장 : 리액트 개발 준비 1-1. 리액트 프레임워크 이해하기 리액트(React) : 오픈소스 자바스크립트 프레임워크. 가상 DOM과 JSX라는 방식으로 동작. 싱글 페이지 어플리케이션을 만드는 프론트엔드 자바스크립트 프레임워크 싱글.. 공감수 0 댓글수 0 2024. 3. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.