분류 전체보기 159

[ 애프터 이펙트 ] 컴포지션의 개념.

[ 애프터 이펙트 ] 컴포지션의 개념.    ∇ 애펙 컴포지션의 개념. 프리미어 프로의 시퀀스,  포토샵과 일러스트는 아트보드 피그마에선 프레임이라고 부르는 기본 도화지 같은 개념을 애프터 이펙트에서는 "컴포지션"이라고 부릅니다. (프로젝트와는 다른 개념)Ctrl + N 버튼으로 컴포지션 설정 창을 오픈 가능합니다.               √ Width & Height : 가로(폭) & 세로(높이) 사이즈 ( 엥간하면, 사전설정값(프리셋)을 쓰는게 편리 )                           - FHD : 1920 X 1080                           - 4K : 3840 x 2160             √ Pixel Apect Ratio(픽셀 종횡비) : 정사각형 픽..

[ Web & Mark UP ] CSS 기본 정리.

[ Web & Mark UP ] CSS 기본 정리.   ∇ CSS 기본 정리.목 차1. CSS 문법 형식2. CSS 적용하기3. CSS 주요 문법 요약 ※ CSS의 기본 사항.        - CSS는 HTML과 함께 웹 표준의 기본 개념입니다.             ( 추후에 스타일컴포넌트, 테일윈드 등의 프레임워크로 변형 가능하기에 기본 개념을 숙지해야함.)         - HTML이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어서 뼈대를 만드는 역할을 한다면,            CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소들을 활용해 디자인을 담당 합니다.            ⊙ 초창기 HTML은 style 속성을 통해서 태그를 꾸밀 수 있었습니다.            하지..

[ Web & Mark UP ] HTML 필수 태그 정리해보기 - [1]

[ Web & Mark UP ]   HTML 필수 태그 정리해보기 - [1]  ∇ HTML 필수 태그 - [1]목 차1. 텍스트 작성하기.2. 텍스트 서식3. 주석4. HTML 공간 분할5. HTML 요소의 타입.6. HTML 리스트태그7. 링크와 이미지 넣기8. 텍스트 강조하기   1. 텍스트 작성하기.      ☆ 제목 ( Heading )            - HTML은 제목을 표현할 수 있는 다양한 크기의  태그를 제공합니다.            - 가장 큰 크기의 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현 가능합니다. 제목1의 크기입니다!제목2의 크기입니다!제목3의 크기입니다!제목4의 크기입니다!제목5의 크기입니다!제목6의 크기입니다!         대부분 브라우저상에서는 종..

[ Web & Mark UP ] HTML 기초 문법 미리보기.

[ Web & Mark UP ] HTML 기초 문법 미리보기.   ∇ HTML 문법 간략하게 정리.  이전 글에서 말했듯이,     HTML은 명령어 태그와 속성 그리고 값으로 구성되어져있습니다.    태그는 로 둘러싸여져 있고, 끝에는 형태로 닫아줘야 합니다.    처음과 끝에 구성되는 태그를 요소(element)라고 하고 이러한 요소들을 이용하여 웹 문서를 작성하는 것을   마크업(MARK UP)이라고 합니다. Hello World!      요소는 요소안에 또 다른 요소를 추가할 수 있지만,           닫는 것을 순서대로 닫아줘야 합니다.    요소의 유형은 블럭과 인라인으로 나뉩니다.     블럭은 줄바꿈이 가능 /  인라인은 줄바꿈이 불가능 합니다.              ..

[ Web & MarkUp ] "HTML" 작성을 위한 기본 요소.

[ Web & MarkUp ] "HTML" 작성을 위한 기본 요소.   ∇ HTML의 기본 구성 요소들.목 차1. 태그 & 속성 & 문법 & 주석2. HTML의 기본 구조3. DTD와 html,head,body4. HTML의 특징 파악하기        1. 태그 & 속성 & 문법 & 주석.                        ∇ 태그.                  - 웹 페이지를 구성하는 요소로는 텍스트*이미지*버튼 등 매우 다양하게 존재합니다.                   - 태그는 이런 다양한 구성 요소들을 정의하는 역할을 하며,                          " HTML 문서를 다루는 가장 작은 단위 " 입니다.                                  ..

[ 서비스기획 & UX ] 올바른 MVP의 개념.

[ 서비스기획 & UX ] 올바른 MVP의 개념.   ∇ 올바른 MVP의 개념.  1. 명확한 가치 제안 [ Value Proposition ]        우리가 MVP에서 가장 중요하게 생각해야 할 것은       "제품이 전하고자 하는 '핵심 가치'만을 담는 것 ! "         무조건 최소한의 기능을 구현해서, 시장에서의 반응을 빠르게 검증해야 한다는 압박으로 인해서       우리 브랜드(제품)의 핵심 가치가 결핍된  제품을 출시하는 것은        출시를 안하느니 못 하다는 것을 깨달아야 합니다.                우리의 프로덕트를 기획하려 한다면,             해당 제품이 전하고자 하거나 해결하려고 하는 핵심 가치에 대한 고민에 많은 시간을 할애하고           ..

UX Director. 2024.10.21

[ 서비스 기획 & UX ] UIUX원칙 : 4 좋은 캐러셀 디자인을 위한 가이드 5가지 UX원칙 가이드라인.

[ 서비스 기획 & UX ] UIUX원칙 : 4  좋은 캐러셀 디자인을 위한 가이드 5가지 UX원칙 가이드라인.5. 좋은 캐러셀 디자인을 위한 가이드 2. 슬라이드의 수를 제한한다.  ∇ 5가지, 좋은 캐러셀 디자인을 위한 UX 원칙들목 차1. 캐러셀이란 무엇인가??2. 캐러셀의 장점3. 캐러셀의 단점.4. 좋은 캐러셀 디자인을 위한 가이드 1. 콘텐츠 노출이 최우선5. 좋은 캐러셀 디자인을 위한 가이드 2. 슬라이드의 수를 제한한다.6. 좋은 캐러셀 디자인을 위한 가이드 3. 진행률을 표시하기7. 좋은 캐러셀 디자인을 위한 가이드 4. 모바일에 최적화시키기.8. 좋은 캐러셀 디자인을 위한 가이드 5. 내비게이션 컨트롤 디자인.9. 자동 로테이션 효과에 대한 팁.10. 캐러셀 기능의 가장 좋은 대안  ..

UX Director. 2024.10.21

[ 3D Web : Front_JavaScript ] 자바스크립트 개요.

[ 3D Web : Front_JavaScript ] 자바스크립트 개요.  ∇ 자바스크립트 개요목 차1. 자바스크립트란2. 자바스크립트 작성 방법3. 자바스크립트로 할 수 있는 일들. 4. 자바스크립트와 HTML의 차이점.   1. 자바스크립트란자바스크립트는 HTML 위에서 동작하는 언어이며HTML의 특징인 단순 텍스트 위주의 정적인 웹 페이지의 제한적인 기능을 해결하기 위해서 만들어진 동적인 언어입니다. 자바스크립트는 웹에서 이용할 수 있도록 만들어진 스크립트언어로, 자바스크립트로 작성된 웹 문서는클라이언트에 그대로 전송되기 때문에 사용자가 페이지에 있는 버튼을 마우스로 클릭하거나 키보드를 입력하는 것과 같은 이벤트 처리작업을 즉시 처리할 수 있습니다. 자바스크립트는 인터프리터 언어이므로 컴파일과 같..

[ 컴퓨터 그래픽스 ] OpenGL : Image Formation & Graphics pipeline

[ 컴퓨터 그래픽스 ] OpenGL : Image Formation & Graphics Pipeline ∇ OpenGL : Image Formation & Graphics Pipeline       OpenGL의 동작은 Vertices를 Pixels로 변환하는 과정을 지원합니다.             √ Vertex : 3D객체를 구성하는 하나의 점.                     √ Pixel:  모든 렌더링 연산이 끝난 후 모니터(뷰)에 표현되는 하나의 점.            Vertex -> Pixel의 변환과정에 대해서 알아보겠습니다.     ∇ Image Fromation.                                                               이미..

[ 3D Web : Front_JavaScript ] JavaScript - 자스의 동작원리.

[ 3D Web : Front_JavaScript ] JavaScript - 자스의 동작원리.   ∇ 자바스크립트의 동작원리목 차1. 자바스크립트의 동작 구조.2. 자바스크립트는 무슨 스레드 구조인가 (싱글?멀티?)3. 자바스크립트가 비동기 작업을 수행하는 방법은?4. Call Stack이 비어있어야 하는 이유는  1. 자바스크립트의 동작 구조.        - 자바스크립트를 동작시키기 위해서는 " 자바스크립트 엔진 "이 필요합니다.         - 자바스크립트 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만,             이 중에서 가장 대표적인 예는 Google에서 제작한 V8엔진입니다.            -V8엔진은 두 가지 구성요소로 구성됩니다.         ..