야생가오리

7. Design System과 UI PrototypingDesign System과 UI prototyping의 개념: UI디자인의 구체적인 결과물 제작에 관한 방법이자 도구Design system- 재사용 가능한 구성요소의 조합- 스타일 가이드를 포함하는 UI 구서용소의 집합- 불필요한 디자인의 중복성 감소- 시각적 일관성 부여- 제품에서 공유되는 철학이나 어워드를 대규모로 관리ex) 구글의 material design, IBM의 carbon designAtomic Design : 디자인시스템이 갖고 있는 계층적 구성요소- Atoms(낱개의 이미지, 아이콘...) - Molecules(버튼이 있는 필드...) - Organisms (디자인 패턴과 유사) - Templates - pages디자인 시스템이..

3. 인터랙션과 사용성1. 인터랙션의 종류Interaction : 상호작용, 관계, 소통, 반응- 정보통신, 디자인에서: 인간-컴퓨터 상호작용(HCI)컴퓨터를 인간에게 좀더 쉽고 쓸모있게 함으로써 인간과 컴퓨터 간의 상호작용 개선 Interaction의 방법1) Touch interaction감압식: 누르는 힘을 감지해서 위치 탐색- 손가락이 아닌 비도체로도 작동 가능- 느린 반응속도, 멀티터치 기술 적용 어려움정전식: 전도체가 닿을 때 전류의 변화 인식- 전도체만 인식해 오작동 가능성 낮음, 빠른 반응속도, 선명한 액정, 멀티터치- 높은 소비전력, 높은 제조단가, 두꺼운 장갑 등 불가Multituch Interface- tap / press(hold) / double tap / flick / drag-..

PART 5. 컴포넌트 & 배리언츠 적용하기01 컴포넌트로 동일한 형태를 반복해서 사용하기컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소. 작은 요소인 버튼이나 아이콘부터 레이아웃 전체에 이르기까지 다양한 범위에서 사용 가능 반복해서 사용되는 요소는 컴포넌트로 만들어 관리하면 효율적이고, 모든 요소를 한번에 편집할 수 있어 유지보수가 쉬움 1) 메인 컴포넌트와 인스턴스 컴포넌트 생성하기메인 컴포넌트: 가장 먼저 생성한 컴포넌트. 인스턴스 컴포넌트의 기본 속성을 정의하는 역할을 하며, 디자인에 직접 사용하지 않고 별도 페이지에서 관리하는 것이 일반적임 인스턴스 컴포넌트: 메인 컴포넌트의 복제본. 디자인에 직접 사용되며, 메인 컴포넌트와 속성이 동기화되어 있음 2) 인스턴스 컴포넌트의 속성 변경하기 3)..

PART 4. 피그마의 꽃, 오토 레이아웃 살펴보기01 오토 레이아웃 구성요소 알아보기1) 오토 레이아웃 생성- 오브젝트 선택한 상태에서 shift + a ctrl + d로 복제하면 프레임도 같이 따라 늘어남새 오브젝트를 끼워넣거나 기존 오브젝트를 빼는 것도 가능방향키로 오브젝트끼리의 순서 변경도 가능 2) 방향에 따라 오브젝트 배열하기수직 / 수평 / Wrap으로 정렬 가능wrap은 수평방향만 적용됨. 상위 컨테이너 크기에 따라 내부 오브젝트 자동 줄바꿈 3) 간격 설정하기오브젝트 간 간격 조절 가능하나의 프레임 안에 있는 모든 오브젝트는 같은 간격을 가짐wrap에서는 가로/세로 간격 따로 설정 가능 4) 패딩 - 오브젝트와 프레임 사이 크기 조절하기상하좌우 방향 설정 가능. Ctrl을 누르고 패딩을 ..

교재 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주차 과제가상 설문조사 작성하기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..

4. 설문과 통계 설문- 가장 흔하게 접할 수 있는 방법. 가장 쉽게 또는 만들 수 있는 방법- 디자인 조사 방법 중 가장 정량적 -> 통계를 알아야 함. - 미리 구조화되어 있는 설문지나 면접을 통해 사회현상에 관한 자료를 수집, 분석하는 연구 방법 잘 수행된 설문조사- 중요한 결정을 내리는 데 사용. 사람들의 의견과 행동양상에 대한 명확한 수치 제공- 명료한 수치, 벤치마크, 이유 확보, 응답자들에게 의견 표명 기회 제공 설문조사가 적합한 경우- 명확해진 문제, 의식적인 문제에 적합 -> 인터뷰 or 관찰과는 다름.- 얼마나 많은 사람들이 의견에 동의하는지 알아볼 때 적합=> 설문의 장점: 객관성 / 단점: 생생함(주관적인 느낌의 차이)과 유연함의 결여 설문문한 개발과 설문지 제작1) 설문이 적합한 ..

케이묵 수강신청 인증 1 . UX 디자인 프로젝트 이해하기UX 디자인 프로세스- 더블 다이아 모델(DDM)이 가장 광범위적으로 사용 : 프로젝트 내적인/하위 내용은 이해하기 쉽지만 프로젝트 상위/메타적인 이해는 누락될 가능성 O- 프로젝트를 통해서 도달할 기업 차원의 목표, 기대효과 파악- 변형된 더블 다이아 모델ㄴ 이해하기 프로세스 추가ㄴ 어느 정도의 규모로 진행할지, 누가 의사결정권자/이해관계자인지 파악, 산업/기업/비즈니스에 대한 이해 선결 -> 효율적 전략설정 가능 산업분석산업 : 인간의 생활을 경제적으로 풍요롭게 하기 위해 재호나 서비스를 생산하는 활동/조직top-down approach : 경제분석 -> 산업분석 -> 기업분석Bottom-up approach : 기업 -> 산업 -> 경제 기업..

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..

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는 변환 전 먼저 코드를..