본문 바로가기
리액트 기초 :: React basic React 상식 React의 5가지특징 1. Element : 컴포넌트 최소단위 (header, h1, p, span ...) 2. JSX(javascript XML) : 자바스크립트 확장 문법 , 겉으로 보기앤 자바스크립트 + html 3. Component : 첫글자 대문자 a. function 형 i. ReactElement 리턴. (훅과 연동) b. class 형 i. State관리 (동적요소) ii. 훅이 클래스 컴포넌트를 대체가능 (클래스는 상대적으로 무거움) 4. Props : 데이터 동기화를 위해 사용됨 a. Read only (바꾸면 안되기 때문, 동기화니까) b. 위에서부터 데이터가 흐른다. 5. State : 동적데이터 a. 이벤트 우측에는 함수 선언문이 놓여야 한다. i. 함수 실행.. 2020. 8. 28.
황금 비율 :: . golden ratio 황금 비율 정의 : 고대 그리스에서 발견된 것으로 기하학적으로 가장 조화가 잡힌 비율로서 미적 감각이 뛰어나 붙여진 이름 특징 1. 황금비율은 시각적 안정감을 준다. 2, 조형적 아름다움을 위해서는 변형이 필요하다. (다양한 그리스 시스템 이해필요) 예시) 웹 디자인에 적용을 하면 폰트크기 13일때 라인하이트 값은 17이나 21이 좋다. 왜냐하면 8:13 의 비율을 생각해서 13폰트일때 아래위의 간격4 픽셀씩 하면 8픽셀이라는 비율이 나온다. 기존 폰트크기 13크기에 4를 더해서 라인하이트 값이 18이된다. 황금비 황금각도 황금비율 계산 사이트 metallicratio 2020. 8. 27.
타이포그래피 :: typography 타이포그래피 타이포디자인 가이드라인 본문 vs 제목 본문용 타이포 : 작은 사이즈에서 판독 및 가독이 편함. 간격이 넓음. 얇은 획을 포함. 제목용 타이포 : 강한개성과 정교함을 가짐. 판독성과 가독성 무시가능. 타이포 간격 : 답답하거나 심심하지 않다. 디자인 전반에 걸쳐 고른 간격을 가진다. 디자인의 디테일 부분에 해당한다. 타이포그래픽 일러스트레이션의 혼합 영문과 국문의 혼합의 경우, 폰트크기와 높이를 맞추어야한다. 세리프 vs 산세리프 (Serif, San serif) 타입 최고의 원칙은 세리프와 산세리프를 섞어서 사용하는것. 타입의 특징을 파악해서 사용한다. 가벼움 vs 무거움 (Light, Heavy) 무겁거나 또는 가벼운 무게의 타이포는 강한 시각적 대비를 이룬다. 이 테크닉은 종종 세리프체.. 2020. 8. 26.
그리드시스템 :: grid system 그리드 시스템 정의 : 페이지를 구성하는 정보를 의미있고 논리적으로 일관성있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크(구조, 체제). 목적 : 정보에 질서와 구조를 부여한다. - 베이스라인(Baseline)기반의 타입디자인. 종류 원고그리드 원고 그리드는 간단한 구조의 그리드입니다. 주로 광범위하고 지속적인 텍스트 블록에 사용되는 단일 컬럼으로 만든 큰 사각형 영역입니다. 컬럼그리드 컬럼(열) 그리드는 페이지에 여러 개의 열을 배치할 때 사용되는 그리드입니다. 불연속 정보 및 콘텐츠의 요구를 제시할 때 유용합니다. 모듈그리드 모듈러 그리드는 컬럼 그리드와 유사하며, 로우와 거터를 추가한 그리드입니다. 다소 복잡한 프로젝트에 사용됩니다. 계층그리드 계층 그리드는 웹사이트.. 2020. 8. 25.
무드보드 :: moodboard 무드보드 & 컬러 정의 1. 사진, 텍스쳐, 패턴, 타이포, 컬러 등을 콜라주하여 하나의 보드에 자신의 생각을 표현하는것. 2. 보통 브랜드 디자인의 사전 작업 a. 자신이 생각하는 느낌을 팀원들에게 전달하기 위함 : 브랜드 디자인의 기획서(?) 예) 커피브랜드 : 카페 인테리어 이미지 + 부드러운 켈리그라피 + 모던한 느낌의 텍스처 + 라인일러스트 등 3. UX/UI 프로세스에도 적용가능. (디자인 시스템 및 컬러가이드) a. color guide b. type guide 어떻게 작업하는가? 정해진 양식이나 가이드는 없음. 본인의 개성이 드러나도록 작업. 리서치 1. 디자인 레퍼런스 사이트 리서치. (무드보드의 목적과 목적을 달성하기 위한 방법을 생각) a. 유행하는 UI디자인 b. 영감을 주는 사진 .. 2020. 8. 24.
컨셉트 디자인 :: concept deisgn 컨셉트 디자인 정의 광범위한 생각들의 형태가 명확하게 표현되는 단계로서 디자인 프로세스의 초기단계. (= 제안디자인) 포함영역 : UI, UX, strategy, interaction, visual. 1. 기획의도 파악 기획 내용에 대한 질문 및 고객 커뮤니케이션 2. 레퍼런스 - 경쟁사 서비스 종류 분석 - 경쟁사 UI 분석 - 고객사가 원하는 컨셉 분석 - 디자인 에이전시 트랜드 분석 - 컨셉표현 (아이덴티티, 비주얼, GUI) 경쟁사 UI 분석 더보기 패키지 여행서비스 - 필수요소 : 목적지 선택, 출발 날짜 및 기간, 항공 선택 등 제품을 선택하는데 있어서 꼭 필요한 UI - 선택요소 : 필터기능, 정렬기능, 태그기능, 찜하기 기능 등 없어도 되지만 있으면 편리한 UI 특별한 UI를 만들기 위함이.. 2020. 8. 22.
뷰 타입 :: View type 뷰 타입 GRID 형 정의 : 이미지 + 2개 이상의 세로줄을 사용한UI - 이미지가 대부분의 공간을 차지, 텍스틀 최소화. - 유저가 이미 목적을가지고 어떤콘텐츠를 선택할지 알고 있을때 유용함. - 이미지는 자극을 주어 급한선택을 할 수 있게 만들고, 전체콘텐츠를 보기위해 많은 스트롤을 해야한다는 단점. ex)인스타그램, 제품, 갤러리등에서 사용. LIST 형 정의 : 한 세로단에 모든 콘텐츠를 나열한 뷰 형태. 특징 : 텍스트 라벨을 훝어보고 자신이 원하는 정보를 빠르게 찾을 수 있도록 해줌. 종류 - 텍스트 형태 : 아코디언 사용으로 오버스크롤링 방지. - 텍스트+섬네일(아이콘)형태 : 리스트형 상품리스트. CARD 형 정의 : 콘텐츠가 있는 사각형 영역을 카드를 나열하듯이 배치해 보여 주는 UI .. 2020. 8. 11.

티스토리툴바