rhrjsdn1208 님의 블로그

11월 26일

rhrjsdn1208 — Wed, 26 Nov 2025 17:27:46 +0900

모션 그래픽을 구현하기 위한 툴 Adobe After Effects

Adobe After Effects의 기본 구조

1. Composition

AE에서 컴포지션은 작업의 무대입니다. 영상의 해상도, 길이, 프레임 수 등을 정하고, 그 안에서 모든 움직임과 디자인이 만들어진다.
하나의 컴포지션은 곧 하나의 장면(Scene) 인 셈이다.

2. Layer

레이어는 영상 속에 쌓이는 각각의 재료이다.
텍스트, 도형, 이미지, 영상, 사운드 등 모든 요소가 하나의 레이어로 존재한다.
이 레이어들을 쌓고 순서를 바꿔가며 화면 안의 구성을 만들어간다.

3. TimeLine

AE의 하단에는 타임라인이 있다.
시간의 흐름을 따라 각 레이어가 언제 등장하고 사라지는지, 어떤 움직임을 가지는지를 제어하는 공간이다.
즉, AE에서 시간은 ‘캔버스의 축’이라고 생각하면 된다.

4. Keyframe

AE에서 모든 움직임의 시작과 끝은 키프레임으로 정해진다.
“이 시점에서는 여기 있고, 저 시점에서는 저기 있다.” 이 두 지점을 정하면 AE가 그 사이의 움직임을 자동으로 만들어준다. 그래서 키프레임은 움직임의 기준점이자 AE의 핵심 개념이라고 할 수 있다.

5. Easing

움직임은 단순히 이동하는 게 아니라, 속도의 변화가 들어갈 때 훨씬 자연스러워진다.
AE에서는 이런 속도 변화를 이징(Easing) 이라고 부른다.
시작은 천천히, 중간은 빠르게, 마지막은 다시 부드럽게, 이 리듬이 모션의 완성도를 높여준다.

Adobe Efter Effects의 작업 순서

컴포지션 생성 → 작업 해상도, 프레임 설정
소스 가져오기(Import) → 영상, 벡터 파일, 이미지, 오디오 등
1. 혹은 소스 제작 → 텍스트, Shape Layer, 이펙트 등
레이어 구성 → 요소를 배치하고 순서 정리
키프레임 설정 → 위치, 회전, 투명도 등 속성 지정
이징 조정 및 그래프 세밀화 → 자연스러운 움직임 구현
미리보기(Preview) → 실시간 결과 확인
렌더링(Rendering) → 최종 영상 파일로 출력

모션 그래픽의 정의와 본질

모션그래픽(Motion Graphic)이란 ‘움직임(Motion)’과 ‘그래픽(Graphic)’의 결합이다.

즉, 정적인 그래픽 디자인이 ‘한 장면의 구성’을 다룬다면,

모션그래픽은 그 장면들이 시간의 흐름 속에서 어떻게 변화하고 연결되는지를 다룬다.

쉽게 말해 색상과 형태가 ‘움직이는’ 것이 아니라, 움직임을 통해 새로운 의미가 만들어지는 과정 자체가 모션그래픽이다.

시간 위에서 구성되는 디자인

모션그래픽의 핵심은 시간(Time) 을 기반으로 디자인이 전개된다는 점이다.

그래픽 디자인이 화면 안의 형태, 색, 구도를 설계한다면,

모션그래픽은 그 요소들이 시간의 흐름에 따라 어떻게 변화하고 연결되는지를 설계한다.

예를 들어,

로고가 등장하는 순서
도형이 확장·축소되는 타이밍
색상 전환의 속도
이 모두가 “시간 위에서의 디자인”이다.

즉, 모션그래픽은 정적인 디자인을 시간 축으로 확장한 형태이다.

시각 요소의 관계와 변화 설계

모션그래픽은 한 화면 안의 ‘움직임’보다, 요소들 간의 관계 변화를 통해 의미를 만든다.

도형, 텍스트, 색상, 질감, 위치가 서로 영향을 주고받으며 시각적인 리듬과 구조를 형성한다.

예를 들어,

원형이 선형으로 바뀌는 순간 “유연함 → 명확함”이라는 이미지가 만들어지고,
어두운 색에서 밝은 색으로 바뀌면 “집중 → 확장”의 인상을 준다.

이처럼 움직임은 단순한 장식이 아니라, 그래픽 간의 관계를 정의하는 언어다.

그래서 모션그래픽은 움직임으로 구조를 표현하는 디자인 방식이라고 할 수 있다.

시각적 구성의 흐름 이해

모션그래픽을 설계할 때 가장 중요한 건 순서와 흐름이에요.

시간의 흐름 속에서 무엇이 먼저, 무엇이 나중에 등장하는가가 시청자의 인식 구조를 결정한다.

즉,

화면의 시작과 끝을 어떻게 배치할지
요소 간 전환(Transition)을 어떻게 연결할지
움직임의 속도를 어떻게 조정할지

이 세 가지가 모션그래픽의 시각적 완성도를 만든다.

모션그래픽은 결국 시각 요소들의 연속적인 변화를 하나의 문장처럼 엮는 과정이다.

그래서 “움직임의 문법”을 이해하는 것이 매우 중요하다

모션 그래픽의 활용 분야

모션그래픽은 거의 모든 산업에서 시각적 커뮤니케이션 수단으로 쓰이고 있다.

디지털 콘텐츠 시대에 사람들은 이미지를 ‘읽는’ 것이 아니라 ‘보는’ 속도로 소비한다.

그래서 정보나 감정을 가장 빠르고 정확하게 전달하기 위해 움직임(Motion) 이 필요한 것이다.

기업의 브랜딩 영상, 앱의 인터페이스, 유튜브 오프닝, 전시관의 미디어아트까지 모션그래픽은 “시각적 설득”의 도구로서

광고, IT, 예술, 교육, 공공 분야 등 거의 모든 영역에서 활용되고 있다.

‘어디서 어떻게 쓰이는가’를 이해하면, 내가 만들 영상의 방향도 더 명확해진다.

브랜딩 / 광고 영상

목적: 브랜드 아이덴티티를 시각적으로 표현
특징:
- 로고, 컬러, 슬로건 등 브랜드 핵심 요소를 모션으로 설계
- 브랜드의 가치·감정·톤을 전달
핵심 포인트:
- 브랜드의 “첫인상”을 결정짓는 영상
- 움직임, 색상, 음악이 브랜드 감정선과 일치해야 함

UI, UX 모션

목적: 디지털 인터페이스를 사용자 친화적으로 표현
특징:
- 터치, 클릭, 전환 등 인터랙션을 부드럽게 연결
- 시각적 피드백을 통해 사용성(Usability) 향상
핵심 포인트:
- 모션은 단순한 장식이 아니라 ‘의미 있는 반응’이어야 함
- 애플 iOS의 물리기반 전환, 구글 머티리얼 디자인 모션 가이드 참고

SNS/숏폼 콘텐츠

목적: 짧은 시간 안에 메시지를 즉각 전달
특징:
- 15~30초 내 완결 구조
- 세로 비율, 자막·그래픽 강조
- 강한 색감, 트랜지션, 템포 중심 연출
핵심 포인트:
- 첫 3초 안에 관심을 끌어야 함
- 반복 감상(루프) 구조로 완성도 강화

타이틀 시퀀스

목적: 영상의 세계관과 분위기를 한눈에 전달
특징:
- 폰트, 음악, 그래픽의 조합으로 테마 확립
- 영화·드라마·예능 등 서사형 콘텐츠의 오프닝에 사용
핵심 포인트:
- 첫 인상 = 영상의 몰입도
- 시각적 콘셉트와 음악 싱크가 중요

미디어아트

목적: 대형 스크린·공간에서 몰입형 경험 제공
특징:
- 실사 영상+그래픽 결합, 프로젝션 맵핑, LED 미디어월 사용
- 관객의 위치, 시선, 동선을 고려한 공간 연출
핵심 포인트:
- 해상도·비율·조명 등 공간 제약에 맞는 그래픽 설계
- 루프(Loop) 구조 필수

모션 그래픽의 핵심 구조

모션그래픽은 핵심 요소는 형태, 타이포그래피, 색상, 타이밍, 네 가지이다.

이 네 가지가 각각 역할을 가지고 유기적으로 결합할 때, 비로소 움직임이 ‘의미 있는 메시지’로 작동하게 됩니다.

즉, 모션그래픽은 화려한 효과의 집합이 아니라, 형태의 움직임·색의 전환·글자의 리듬·시간의 흐름을 조합하는 디자인 구조예요.

이 요소들을 어떻게 설계하느냐에 따라 같은 주제라도 완전히 다른 인상과 전달력이 만들어집니다.

형태

원, 사각형, 삼각형, 선(Line), 아이콘 등 ‘움직임의 주체’를 의미한다.

형태는 시각적 리듬과 균형의 기반이며, 메시지의 구조를 형성한다.

활용 포인트:
- 원형 → 부드러움, 연결, 조화
- 사각형 → 안정감, 질서, 신뢰
- 삼각형 → 에너지, 방향성, 역동성
AE에서: Shape Layer, Mask, Path Animation 등으로 구현

타이포그래피

글자의 형태와 움직임을 통해 정보와 감정을 전달하는 핵심 요소

활용 포인트:
- 서체 선택: 브랜드 톤과 일치 (세리프=신뢰, 산세리프=모던)
- 애니메이션 방식: 등장 타이밍, 방향, 투명도
- 배치: 시선 흐름을 따라 구성
AE에서: Text Animator, Tracking, Anchor Animation 등 활용

색상

감정을 가장 직관적으로 전달하는 요소이다.

모션그래픽에서 색상은 브랜드의 정체성과 분위기를 정의한다.

활용 포인트:
- 브랜드 톤 & 팔레트 설정
- 명도·채도를 통한 계층 구조 표현
- 배경 대비로 주요 메시지 강조
AE에서: Fill, Gradient, Tint, Adjustment Layer 등

타이밍

움직임이 발생하는 시간과 속도.

즉, ‘언제’ 움직이고 ‘얼마나 빠르게’ 변화하는가를 설계하는 영역이다.

활용 포인트:
- Easing: 시작·끝 부드럽게 → 자연스러운 움직임
- Offset: 순차적 등장 → 리듬감 강화
- Hold & Anticipation: 일시 정지로 포인트 강조
AE에서: Graph Editor, Keyframe Velocity, Expressions

11월 25일

rhrjsdn1208 — Tue, 25 Nov 2025 17:42:09 +0900

Key Visual

브랜드나 캠페인의 정체성을 보여주는 핵심 시각 요소

Key Visual의 역할

메세지 전달: 콘셉트를 직관적으로 이해시킴

시각적 일관성: 전체 프로모션의 톤앤매너를 주도

시선 유도: 메인 이미지로서 즉각적인 주목을 유발

Key Visual의 구성 요소

1. 핵심 메세지 요소

브랜드의 핵심 가치나 캠페인 슬로건에 맞는 핵심 키워드 설정

이 키워드를 시각 언어로 변환하는 것이 핵심

ex. 혁신 > 미래적 형태/ 금속 재질/ 블루 톤으로 표현

2. 시각 구성 요소

요소	역할	예시
주제 오브젝트	메세지를 상징하는 중심 소재	제품, 심볼, 콘셉트 아이콘
공간감	주제 강조, 몰입 유도	3D 구도, 원근감, 심도
색채	감정 및 톤앤매너 표현	브랜드 컬러, 분위기 컬러
타이포그래피	메세지 보조 및 리듬 형성	키워드 강조형, 슬로건 스타일
조명과 그림자(디테일)	입체감, 방향성	주요 오브젝트 하이라이트

3. 시각적 계층 구조

Main > Sub > Background 단계로 구성

Main: Key Message 오브젝트

Sub: Sub 그래픽 요소 (빛, 입자, 패턴 등)
Background: 컬러 톤, 공간감, 조명 분위기

Key Visual, 다양한 매체에서 일관성유지, 상황에 따른 유연한 적용

11월 24일

rhrjsdn1208 — Mon, 24 Nov 2025 20:57:24 +0900

TYPOGRAPHY

타입(Type,글자)을 조형적으로 배열하고, 의미를 시각화하는 행위

읽히는 글자(Readable Text)이자, 보이는 이미지(Visual Form)
디자이너는 '언어적 의미'와 '시각적 형상'을 동시에 다룸

디자인에서 타이포그래피의 역할

1. 정보 전달 (Funtional Race)

● 정보를 명확하고 빠르게 파악하도록 도움

● 잘 선택된 서처, 적절한 크기와 줄 간격은 높은 가독성을 부여

● 정보에 대한 접근성 확장

2. 감정 전달 (Emotional Role)

● 타이포그래피는 '글자의 표정'을 통해 감정을 전달

● 서체의 형태, 웨이트, 자간, 대/소문자등이 모두 감정의 언어로 작용

● 타이포그래피는 디자인의 분위기를 형성하고, 독자의 감정을 조절

3. 브랜딩과 정체성 (Identity Role)

● 서체는 브랜드의 인격을 시각화

● 로고타입, 헤드라인, 포스트 타이틀은 강력한 브랜드 경험을 창출

● 서체는 곧, 브랜드가 말하는 '목소리 톤'

디자이너가 알아야 할 타이포그래피 원칙

1. 텍스트에 계층을 설정하라

● 크기,굵기,색상 등으로 계층 설정

● 페이지 구조를 알려주고, 사용자에게 콘텐츠의 흐름 안내

● 명확한 계층 구조는 정보 전달력을 향상시킵니다.

2. 적정한 텍스트 크기 설정

● 다수의 사람들이 편안하게 읽을 수 있는 본문 텍스트 크기 확인

● 사용자에 따른 텍스트 크기 고려 (ex. 고령자를 위한 큰 텍스트)

● 인쇄물에서 7pt 이하의 텍스트 크기 금지

3. 서체 조합의 원칙

● 한 페이지에 사용하는 서체의 종류 제한 (2~3개 정도)

● 조합에 적절한 대비 생성하기 (ex. San Serif + Serif)

● 목적에 맞는 역할 부여하기

4. 가독성을 위한 여백 제공

● 적절한 행간은 가독성을 높일 수 있습니다.

● 행간이 너무 넓으면, 텍스트 박스의 시각적 통일성이 깨집니다.

● 텍스트 한 줄의 글자 수는 60~70자가 적절

5. 텍스트와 배경 사이의 충분한 대비

● 텍스트와 배경 사이의 대비는 가독성에 큰 영향을 주는 요소

● 어두운 배경에는 선명한 서체 사용 권장

● 어두운 배경은 글자의 간격이 좁아 보이는 착시 현상 --> 자간 넓게 조정

텍스트 크기 조절 가이드

구분	권장 텍스트 크기	설명
디지털 (웹, 앱 등)	16px 이상 (모바일: 17px 이상 권장)	가독성 확보가 중요하며, 디지털 취약 계층 고려 필요
인쇄물 (리플렛 등)	9pt ~ 11pt	가까이서 읽는 용도이므로 너무 크게 하지 않도록 하기 원고 양에 따라서 가독성을 고려하여 크기 조절 필요
출판물 (소설 등)	2pt ~ 14pt	출판사 따라 다르지만, 이 범위 크기가 일반적
제목 및 소제목	본문보다 크게 사용	제목과 본문을 시각적으로 구분해야 하므로, 본문보다 크게

포스터 디자인을 위한 비주얼 원칙

1. Visual Structure

● 좋은 타이포그래피는 보이지 않는 그리드 위에 서 있다.

● Grid System: 텍스트를 논리적이고 조형적으로 정렬하기 위한 기본 틀

● 글자와 여백은 서로 대화하는 공간을 생성

2. Visual Hierarchy

● 독자가 정보를 '한눈에' 파악하도록 하는 시각적 질서

● 위계 표현의 4가지 도구: Size, Weight, Color, Position

● Focal Point: 가장 주목해야 할 '핵심 지점' 설정

3. Visual Contrast

● 대비는 디자인에 리듬과 생명을 불어넣는다.

● 포스터에서의 대비는 시선을 멈추게 하는 장치

● 대비는 크기 뿐 아니라 형태, 방향, 색, 질감 모두 포함

4. Rhythm & Repetiton

● 리듬은 시각적 음악, 글자 배열에도 박자가 있다.

● 일정한 간격의 반복 요소가 만드는 시각적 흐름

● 자간, 행간, 단락 간격의 일관성이 시각적 통일감 생성

5. Whitespace

● 여백은 시선을 머물게 하고, 메세지의 집중도를 높인다.

● 여백은 디자인의 호흡이자 강조의 수단이다.

● 여백은 '비어 있음'이 아니라, '의도된 공간'

11월 17일

rhrjsdn1208 — Mon, 17 Nov 2025 19:54:30 +0900

패스파인더의 구성과 기능들

패스파인더는 크게 도형 모드(Shape mode)와 패스파인더(Pathfinders)로 나눈다.

도형 모드에는 합치기(Unite), 앞면 오브젝트 빼기(Minus front), 교집합(Intersect), 교집합 제외(Exclude)가,

패스파인더에는 나누기(Divide), 자르기(Trim), 합치기(Merge), 깎기(Crop),

윤곽선(Outline), 뒷면 오브젝트 빼기(Minus Back)이 있다.

주로 실제 작업에서는 도형 모드를 사용하는 경우가 많다.

합치기

도형을 합친다. 도형의 색은 앞면에 있는 도형의 색을 따른다.

앞면 오브젝트 빼기

뒷면 오브젝트에서 앞면 오브젝트와 겹치는 부분을 뺀다.

교집합

앞면과 뒷면 오브젝트끼리 겹치는 부분만 남긴다.

앞면 오브젝트의 색을 따른다.

교집합 제외

앞면과 뒷면 오브젝트끼리 겹치는 부분만 뺀다.

앞면 오브젝트의 색을 따른다.

나누기

도형을 위와 같이 선택했을때, 보이는 형태대로 잘라낸다.

자르기,합치기

각각 패스파인더의 두번째와 세번 째 메뉴로, 도형을 선택하지 않았을때

보이는대로 잘라낸다.

깎기

앞면 오브젝트의 형태를 남긴 채로 뒷면 오브젝트와 겹치는 만큼 잘라낸다.

윤곽선

나누기와 비슷하지만, 윤곽선으로 변환하여 잘라낸다.

뒷면 오브젝트 빼기

뒷면 오브젝트와 겹치는 만큼 앞면 오브젝트에서 뺀다.

펜 툴 실습

아이콘 디자인의 원칙

아이콘의 역할

네비게이션 기능: 웹 메뉴, 웹 인터페이스에서 빠른 이동 지원 (예시: 홈, 검색, 설정)

인지 강화: 텍스트만 있을 때보다 직관적 이해 속도가 빠름 (예시: 쓰레기통 아이콘 = 삭제)

공간 절약: UI에서 텍스트 대신 작은 아이콘으로 효율적인 공간 활용 가능

브렌드 아이덴티티: 브랜드 철학과 톤 앤 매너를 반영하는 도구 (예시: Google Material Icons)

1. 가독성

2. 정렬

3. 간결성

4. 일관성

11월 4일 (1차 정리)

rhrjsdn1208 — Tue, 4 Nov 2025 20:50:55 +0900

브랜드의 미션 → 기술로 수면을 이해하고, 자연으로 수면을 치유한다.

철학 → 안정된 호흡과 편안한 수면을 제공한다.

핵심 메세지 → AI의 정밀함, 자연이 주는 안정감, 감각적이고 고급스러운 디자인이

어우러진 새로운 스마트 슬립 문화

분석 가능성 (다양한 수면 웰니스 브랜드 조사)

Eight sleep → 기술 기반 수면 웰니스 브랜드, 수면도 운동처럼 훈련할 수 있다. (sleep fitness)라는 개념 제시
Oura → 웨어러블 수면 트래킹 링 (스마트 링) / 수면 측정+일상 웰니스 연결
수면 데이터 → 행동 개선 루프 구현
Somnax → 수면 로봇 / 기술과 감성이 결합된 수면 보조 기기 브랜드
숨브리즈 → 수면 중 발생하는 코골이와 폐쇄성 수면 무호흡증.웰니스 솔루션을 제공하는 브랜드
이갈이, 불면증 등 수면장애 치료에 특화된 의료기기와

기본 정보 정리

선택브랜드: 솜니아

브랜드 미션: 기술로 수면을 이해하고, 자연으로 수면을 치유한다.

톤앤매너: Smart sleep, luxury, organic, comfort

제품설명: 미결정

주요기능: 미결정

타깃: 30-45세의 고소득 전문직, 개발자, 자기개발형 직장인

브랜드 분석

브랜드 철학 / 미션

안정된 호흡과 평온한 수면을 제공한다 / 기술로 수면을 이해하고, 자연으로 수면을 치유한다.

브랜드 톤앤매너

Smart sleep, luxury, organic, comfort

주요 제품 라인
미선정
타깃 가설

30~45세의 고소득 전문직, 개발자, 자기 개발형 직장인

경쟁사

Eight sleep
Oura
Somnax
숨브리즈

향후 확장 가능성

다양한 수면 웰니스 제품군을 파생시킬 수 있음.

제품 콘셉트 구체화

주요 기능: 제품이 제공하는 핵심 기능은 무엇인가?
수면의 질 개선 및 스트레스 완화와 수면의 질 개선
기능적 가치: 사용자에게 무엇을 해주는가?
고급스러운 디자인으로 시각적 만족감, AI를 활용한 기술로 수면의 질 향상
감성적 가치: 사용자가 제품을 통해 어떤 감정을 느낄 수 있는가?
오가닉을 중심으로 편안함 선사/제품의 고급스러운 디자인을 통해 시각적 만족감
타깃 고객: 누가 사용할 것인가? (연령, 직업, 라이프스타일 등)
30~45세의 고소득 소비자, 전문직 및 개발자 등, 자기관리형 라이프스타일
사용 상황: 언제, 어떤 환경에서 사용되는가?
스트레스로 인한 불면증, 깊은 수면이 필요할때
문제 정의: 어떤 불편함이나 욕구를 해결하는가?
사용자의 수면패턴을 분석하여 사용자가 몰랐던 피로의 원인 파악 후 케어해줌
USP(Unique Selling Point): 경쟁 제품과 비교했을 때 어떤 점이 특별한가?
Oura는 스마트링, Somnax가 수면 로봇에 집중했다면 Somnia는 다양한 장르의 제품군 제시

키워드와 컨셉트 정하기

rhrjsdn1208 — Fri, 24 Oct 2025 20:14:07 +0900

브랜드의 가치

Somnia는 기술이 아닌 감각으로 잠을 설계합니다.

우리는 자연의 리듬과 인간의 감정을 연결해,
누구에게나 자연스럽게 스며드는 최고의 수면 경험을 제공합니다.

솜니아의 핵심 가치 재정립 방향

감성, 인간 중심성, 철학적 깊이를 추가한 4대 핵심 가치 구조 제안.

1. INTELLIGENT CALM - 지능적 고요함

보이지 않는 기술, 느껴지는 평온

somnia는 첨단 기술을 내세우지 않습니다.

대신 사용자가 의식하지 못하는 사이,

과학적 알고리즘이 최적의 수면 환경을 조용히 조율합니다.

2. NATURAL RHYTHM - 자연의 리듬

기계적이지 않은, 사람의 속도

somnia는 인공적인 수면이 아니라

인간의 생체 리듬과 감정 곡선을 존중합니다.

자연 소재, 조화로운 향, 빛의 주기등으로

몸과 마음이 스스로 균형을 찾도록 돕습니다.

3. SENSORY SOPHISTICATION - 감각의 품격

감각은 somnia의 언어이다.

somnia는 수면을 오감으로 디자인 합니다.

빛,온도,향,질감,사운드

하나하나의 자극이 부드럽게 조율되어

수면이 기능이 아니라 예술이 되게 만듭니다.

4. EFFORTLESS HARMONY - 무의식적 조화

사용하지 않아도 작동하는 편안함

somnia의 철학은 편리함이 아니라 자연스러움이다.

인테페이스, 기능, 사용성을 최소화 함으로서

사용자의 편안한 숙면을 돕습니다.

브랜드의 메세지: 자연스럽게 스며드는 최고의 수면 경험

Color Identity

CategoryColorMeaningHEX

Somnia Deep	딥 미드나잇 블루	고요함, 깊은 수면	#0D1B2A
Moonlight Mist	라벤더 그레이	감각적 부드러움, 균형	#B2AEC7
️ Fog Whisper	페일 그레이	여백, 직관적 실용성	#D8D9DD
Lunar Gold	소프트 골드	프리미엄 감성, 따뜻함	#EAD7A4
Sleep Sage	세이지 그린	자연의 리듬, 회복	#A8B7A3

제품제작시 컨셉

은은한 달빛, 초승달과 불투명하게 비치는 퍼지는 물결(초승달의 하단에 배치)

Somnia의 본질

“자연스럽게 스며드는 최고의 수면 경험.”

Somnia의 본질은 ‘조용한 혁신’을 통해 인간의 밤을 되찾는 것입니다.

기술이 앞에 서지 않고, 감각이 주인공이 되는 브랜드.
과학이 작동하되, 자연처럼 느껴지는 경험.

Somnia는 ‘지능적인 감성’ 과 ‘자연스러운 고요’ 의 교차점에서
인간의 수면을 다시 감각의 예술로 되돌립니다.

Somnia는 기술로 설계된 감성적 평온함을 통해,
인간의 수면을 ‘자연의 리듬’으로 되돌리는 브랜드입니다.

제품에서 경험으로

Somnia가 만드는 것은 ‘수면 제품’이 아니라,
하나의 분위기, 하나의 감정, 하나의 밤입니다.

조명, 향, 소리, 온도, 인터페이스 —
Somnia의 모든 구성 요소는 **‘감각적 에코시스템’**으로 연결됩니다.

사용자는 제품을 사용하는 것이 아니라,
Somnia의 밤 속에 머무는 경험을 하게 됩니다.

10월 24일 (과제 회고)

rhrjsdn1208 — Fri, 24 Oct 2025 14:56:37 +0900

브랜드 메세지의 전달

메세지의 전달은 잘 된것 같다고 생각한다.

디자인 콘셉트와 스토리의 일관성있는 구성

디자인 콘셉트는 한국인 남성이 한국에서 볼 수 있는 새를 촬영하는 컨셉이였는데,

AI의 한계성 때문에 디테일 부분에서는 놓친 부분이 많은 것 같다.

다만 영상을 만들때는 디테일은 떨어져도 일관성있는 구성을 유지하려고 노력하였다.

영상의 톤앤무드가 브랜드 이미지와 잘 어울리는가

좀 더 활기찬 톤으로 나레이션도 추가하려고 했지만, 잘 되지않았던 것 같고,

마지막에 등장하는 실사와 AI의 괴리감도 없잖아 있는 것 같다.

AI를 활용하여 끝까지 톤앤무드를 유지하려고 했으나, AI로는 대한민국 위성샷을 구현하기엔 역부족이였다.

편집 리듬감과 자막/음악이 메세지를 강화하고 있는가

캡컷의 장점과 단점이 느껴지는 과제였던것 같다,

다양한 트랜지션 효과와 오디오 추가 기능을 통해 쉬운 컷편집에 용이한 캡컷이지만,

개인 설정이나 듀레이션 조절 부분에서는 프리미어 프로보다 부족한 점도 많았다.

일관성있는 편집이나 자막/음악을 다듬기에는 아직 내 실력으로 캡컷을 이용한 편집은 어려웠다.

이번 과제에서 내가 의도한 메세지와 실제 영상에서 전달된 메세지의 차이

의도한 메세지 자체는 구현하였으나, 내가 설정한 스토리보드와는 디테일에서 차이가 많다.

AI로 내가 의도한 모든 것을 디테일하게 100%구현 할 수 있을거라고 생각한것이 패착이였다.

하지만, AI를 통해 실제로 촬영하지 않고, 비교적 손 쉽게 영상을 제작할 수 있었던 것은 긍정적이다.

실제 영상에서 전달된 메세지가 내가 의도한 모든 것을 포함하지는 못했지만, 최대한 노력했다고 할 수 있을 것 같다.

개선 포인트

AI를 활용하여 영상을 좀 더 제작해보고, 프롬프트의 구성을 어떻게 하면 다듬을 수 있을지 더 연구해야한다.

또한, 스토리보드를 구성하는 작업에서 가편집을 통해 구성력을 높이는 것도 필요한 작업이 될 것이다.

10월 20일

rhrjsdn1208 — Mon, 20 Oct 2025 16:59:45 +0900

기획 및 스토리 보드 설계

❶ 평소에 관심 있던 브랜드를 1개 선정한다.

-> 평소에 관심이 있었던 브랜드는 네이처링이다.

탐조를 통해 새 사진을 찍으면, 네이처링에 공유하며, 어떤 시기에 어떤 장소에서 어떤 새가 보이는 지를 공유하며,

궁금했었던 생태 데이터를 서로 주고받고 있다. (취미가 탐조여서 평소에 이용하던 생태기록 사이트이다.)

❷ 브랜드 핵심 가치와 연결된 소셜 메시지를 정의한다.

우리동네에서 관찰되는 새가 다른 동네(지역)에서도 발견되는지 궁금해요.

우리동네에서 관찰한 새를 업로드 해요.

관찰하고 --> 업로드 하고 --> 그렇게 기록된 정보들이 우리동네 생태 지도가 되고, 또 모여서 한국의 생태지도가 됩니다.

자연을 관찰하고 업로드하여 기록하는 것이 곧 자연보호로 이어집니다.

핵심문장 요약: 나의 기록이, 우리의 기록이 모여서 생태지도가 된다. 그렇게 모인 생태지도는 환경보호로 이어진다.

이미지 / 상징 / 아이디어:

새를 관찰하기 위해 동네 하천으로 나감

카메라로 새를 촬영함

네이처링에 촬영한 새를 업로드

나뿐만이 아니라 여러 지역에서 나와 같이 자연에 관심있는 사람들이 각자 사진을 업로드 하고 있음

그렇게 쌓인 데이터가 곧 생태지도를 만듦

생태보호를 위한 지속적인 관찰과 기록을 부각시키기

스토리의 흐름

1. 문제 제시: 우리동네의 새도 다른 동네에서 관찰할 수 있을까? (의문을 가지는 장면)

2. 인식의 순간: 촬영한 새 사진을 네이처링에 공유해볼까?

3. 변화 행동: 촬영한 사진을 공유함, 업로드하고 기록된 수많은 데이터들

4. 메세지 강조: 우리가 공유한 자연 사진 --> 우리동네, 나아가 한국의 생태지도가 되고 --> 이는 곧 환경보호로 이어진다.

❸ 메시지를 시각화할 수 있는 캠페인 콘셉트 도출

❹ 콘셉트를 토대로 기획서 문서 1부 완성

STEP 1. 프로젝트 개요 - 기록의 방향 설정

프로젝트명 --> 우리의 기록, 우리나라의 생태지도를 만듭니다.

목표 --> 우리의 기록들로 생태지도가 만들어지고, 그 데이터가 환경보호의 발자국이 됨.

타깃 --> 환경보호에 관심있는 사람들, 생태와 생태사진에 관심있는 사람들

영상길이 --> 1분 정도

활용 플랫폼 --> 유튜브

STEP 2. 핵심 메세지 - 전달하고자 하는 생각 정리

메인 메세지(1문장) - 우리의 기록들이 생태 지도를 만든다.

서브 메세지 - 우리의 생태메세지가 모여 환경보호의 발자국이 된다.

STEP 3. 콘셉 및 시각적 표현 - 메세지를 영상으로 바꾸는 전략

콘셉트: 우리의 기록 데이터가 모여 만드는 생태지도

시각 표현 전략

톤앤매너: 자연물 이용, 계절이 드러나는 비주얼 요소

색감: 사계절하면 떠오르는 색을 이용

리듬감: 활기차고 밝음

활용장치: 의문 -> 행동 -> 실행 -> 메세지 강조

STEP 4. 시나리오 및 컷 구성

인트로: 사진 파일을 정리하는 모습 -> 우리 동네에서 찍었던 이 새, 다른 동네에서도 보일까?

전개1 -> 밖에 나가서 탐조를 하는 모습

전개2 -> 촬영한 사진을 네이처링에 공유하는 모습

전개3 -> 내가 올린 사진이 우리 동네의 생태 지도를 형성하는 모습

전개4 -> 나 뿐만이 아니라 전국의 이용자들의 업로드를 통해 우리나라의 생태지도가 완성되는 모습

전개5 -> 우리의 기록들이 모여 우리나라의 생태지도를 만듭니다. 로고와 브랜드 컬러톤으로 마무리

10월 2일

rhrjsdn1208 — Thu, 2 Oct 2025 20:01:00 +0900

※마스터 컴포넌트와 인스턴스

회로를 구성하는 구성품을 컴포넌트라고 하듯이,

UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 이야기해요.

컴포넌트라는 표현은 디자인과 개발에서 모두 쓰이는 매우 넓은 개념의 표현이다.

특히 피그마를 다루는 디자이너들에게 컴포넌트는 ‘피그마로 만든 UI 블록’과 같은 말로 쓰인다.

또한 UI디자인에서 컴포넌트는 파운데이션을 조합해 만든 디자인 단위의 개념이다.

하지만 개발에서는 조금 다른 개념으로 쓰이는 등 맥락에 따라 개념이 조금씩 달라진다.

따라서 컴포넌트라는 표현을 사용할 때는 서로 같은 걸 의미하는 지 확인하여야만 한다.

※마스터 컴포넌트(Master Component)

마스터 컴포넌트는 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심이다.

마스터 컴포넌트는 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해준다.

복사된 디자인들을 한번에 수정하거나 편집할 수 있도록 해주는 중요한 기능이다.

피그마에서 마스터 컴포넌트는 고유의 아이콘을 가지고 있다.

※인스턴스(Instance)

인스턴스는 마스터 컴포넌트의 복제본이다.

즉, 마스터 컴포넌트를 복사하면 인스턴스가 생긴다. 따라서 컴포넌트의 속성을 그대로 이어 받는다.

인스턴스는 ◇아이콘이 붙어있다. 복제본이라고 보면 된다.

※마스터 컴포넌트와 인스턴스의 관계
1. 마스터 컴포넌트를 수정하면 인스턴스에도 반영이 된다.

2. 인스턴스를 먼저 수정하면 마스터 컴포넌트를 수정해도 반영되지 않는다.

3. 마스터 컴포넌트를 지우더라도 인스턴스는 남아있다. (다만 마스터 컴포넌트를 복구해야 수정이 가능해진다.)

4. 연결을 해제하면 인스턴스는 마스터 컴포넌트와 분리되고, 일반 프레임으로 변경된다.

9월 30일

rhrjsdn1208 — Tue, 30 Sep 2025 19:55:15 +0900

UI디자인에서의 컬러

컬러가 디지털 환경에서 구현되는 개념과 원리

핸드폰에서 봤던 것을 컴퓨터로 보면 색깔이 조금 다르게 느껴지기도 한다.

컴퓨터나 핸드폰에 문제가 생긴 것이 아닌 빛의 현상때문에 그렇다.

디지털 화면의 원리를 이해하면 어떤 현상인지 알 수 있다.

RGB와 Hex Code

디스플레이는 빛의 3원색으로 구현되는 화면이다.

빛의 농도와 명암을 조절해 여러가지 색으로 만들 수 있다.

RGB 빛의 3원색

빛의 3원색은 빨강, 초록, 파랑이고, 모일수록 밝아진다.

빛을 더해가며 다른 색을 만들기 때문에 가산혼합이라고 부른다.

색의 3원색 CMY이다. 전부 섞으면 검은색(K)가 추가되어 CMYK로 부른다.

빛의 3원색의 첫글자를 따서 쓰면 RGB가 되고, 이게 우리가 아는 RGB색상이다.

컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있다.

RGB색상을 사용할 때 ‘255, 255, 255’ 처럼 작성하는 이유이기도 하다.

이 각각의 숫자를 컴퓨터는 16진수(Hexadecimal)로 변환해서 읽어요.

이 16진수 값이 우리가 흔히 아는 헥스코드이다.
Hexadecimal Code(16진법으로 작성된 코드)를 줄여서 Hex Code라고 한다.