공부

Figma 챕터를 마무리하며 (~Day21 까지)

JaneJaneKim — Mon, 29 Jun 2026 18:54:34 +0900

정말 정신없는 2주가 흘러갔다.

배운 내용을 복습 포스트로 꾸준히 올리고 싶었는데, 생각보다 쉽지 않았다. 피그마에는 아직 모르는 기능이 많았고, 컴포넌트 구조를 잡거나 레이어 순서를 정리하다 보면 예상보다 시간이 훨씬 오래 걸렸다.

와이어프레임은 비교적 빠르게 그릴 수 있었지만, 디자인 작업으로 들어가니 툴을 더 깊게 이해해야 하는 순간이 많았다. 화면을 예쁘게 만드는 것만으로는 부족했고, 나중에 수정하기 쉬운 구조를 만드는 일까지 함께 고민해야 했다.

배웠던 이론들은 시간이 날 때 차차 정리해볼 예정이다.

이번 글에서는 우선 새롭게 알게 된 점과 아직 어려웠던 부분을 기록해보려고 한다.

1. 새롭게 알게 된 점

이번 과정에서 가장 기억에 남는 건 컴포넌트와 인스턴스를 구조적으로 사용하는 방법이었다.

Bottom Bar를 만들 때 아이콘을 별도의 컴포넌트 세트로 분리하고, 활성화 상태를 다른 컴포넌트 세트로 정의한 뒤 Nested Instance로 연결하는 방식을 배웠다.

이때 아이콘 설정이 꽤 중요했다.

아이콘 비율 고정은 꺼두기
아이콘 width는 Fill이 아니라 Fixed로 설정하기
아이콘 크기는 보통 24px 정도로 고정하기

아이콘을 Fill로 설정하면 Bottom Bar 안에서 터치 영역과 충돌이 생길 수 있었다. 특히 터치 영역을 넓게 잡았을 때 아이콘 간격이 의도치 않게 벌어지는 문제가 생겼다. 아이콘 자체는 고정된 크기를 유지하고, 터치 영역은 따로 관리하는 편이 더 안정적이었다.

Nested Instance를 적용한 뒤 확인하는 방식도 새롭게 알게 됐다.

컴포넌트 자체에서는 하위 옵션을 바로 조정할 수 없기 때문에, 적용이 잘 되었는지 보려면 인스턴스를 만들어서 확인해야 했다. 나는 계속 컴포넌트 안으로 들어가서 옵션을 바꾸려고 했는데, 굳이 그럴 필요가 없었다. 인스턴스를 만들어서 확인하는 방식에 익숙해지는 게 더 중요했다.

인스턴스 스왑을 할 때는 스왑 대상이 모두 컴포넌트로 만들어져 있어야 했다. 아이콘, 버튼, 이미지처럼 바꾸고 싶은 요소가 있다면 먼저 컴포넌트로 정리해두어야 한다.

Rename 기능으로 레이어 이름을 한 번에 바꾸는 방법도 처음 배웠다. 작업량이 많아질수록 레이어 정리가 필요해지는데, 일괄 Rename 기능은 꽤 유용하게 쓸 수 있을 것 같다.

2. 막히거나 어려웠던 부분

아직 가장 헷갈리는 부분은 Nested Instance를 쓰기 위해 컴포넌트를 Auto Layout으로 잘 묶는 과정이다.

Fill, Fixed, Hug의 뜻은 어느 정도 알겠지만, 이 옵션들이 컴포넌트나 프로퍼티 안에서 어떻게 작동하는지는 아직 손에 익지 않았다.

아이콘만 따로 볼 때는 문제가 없어 보이는데, Bottom Bar 안에 넣고 컴포넌트로 만든 뒤 활성화 상태까지 연결하면 예상과 다르게 간격이 벌어지거나 크기가 달라지는 경우가 있었다. 옵션의 뜻을 외우는 것보다 여러 번 만들어보면서 구조에 익숙해지는 게 더 필요해 보인다.

인스턴스 스왑이나 텍스트 프로퍼티도 아직은 어색하다.

기능은 배웠지만, 어떤 상황에서 쓰면 좋은지 더 경험해보고 싶다. 실제 업무에서 명확한 목적이 있는 상태로 사용해보면 지금보다 훨씬 잘 이해할 수 있을 것 같다. 지금은 기능을 따라 적용하는 단계라서 아직 자연스럽게 쓰기까지는 시간이 더 필요하다.

이미지 스왑도 많이 어렵게 느껴졌다.

특히 실습 중 Item을 Property Variant로 묶고, 다시 Item으로 바꾸는 과정이 헷갈렸다. 아이콘 스왑과 원리는 비슷한 것 같지만, 폴더 이름을 정리하는 방식이나 구조를 잡는 과정이 아직 익숙하지 않다.

3. 이번 과정을 마치며

이번 피그마 과정에서는 화면을 빠르게 그리는 것보다 구조를 잘 잡는 연습을 많이 했다.

컴포넌트, 인스턴스, 오토레이아웃, 프로퍼티, 인스턴스 스왑은 처음엔 복잡하게 느껴졌지만, 반복 작업을 줄이고 디자인을 일관되게 유지하려면 꼭 필요한 기능들이었다.

아직 완전히 능숙하게 다루지는 못하지만, 어떤 부분을 더 연습해야 하는지는 조금 분명해졌다. 앞으로는 기능을 따라 하는 것에서 끝내지 않고, 화면을 만들 때 어떤 구조로 설계하면 수정하기 쉬울지 함께 고민해보고 싶다.

많이 만들어보는 게 제일 좋은 복습인 것 같다.
헷갈렸던 부분들도 계속 반복하다 보면 조금씩 자연스러워질 것 같다.

컴포넌트와 프로퍼티, 인스턴스 스왑

JaneJaneKim — Tue, 23 Jun 2026 18:43:45 +0900

오즈코딩스쿨의 15일차~16일차 수업을 뒤이어 리뷰한다.

배운 순서가 조금 달라서, 통합 리뷰를 하고자 한다.

15~16일차

1. 컴포넌트
- 메인 컴포넌트와 인스턴스
- 프로퍼티의 정의, 종류, 사용법
- Figma의 여러 Tip / 주의사항

2. 인스턴스 스왑

3. Varients (다음 회차에)

메인 컴포넌트와 인스턴스

컴포넌트에서 가장 중요한 관계는 Main Component와 Instance의 관계다.

- Main component : 원본. 수정 시 연결된 디자인이 함께 변경 된다.

- Instance : 원본 컴포넌트를 복사해서 사용하는 요소

작업 속도를 높이고, 일관성 있는 디자인을 만들 수 있다.

컴포넌트를 사용해 실습을 해보았다.

여기에서 Constraints 기능을 사용해, 위에 떠있는 팝업을 우측 상단에 고정시킬 수 있도록 하였다.

Tip. 모바일 화면을 디자인할 때 상단, 하단바는 Constraints로 Left + Right / Top & Bottom 으로 고정시켜주고 시작하다.

프로퍼티 (=속성, 성격)

메인 컴포넌트에 추가 속성을 부여하는 기능!

이미 완성된 컴포넌트에 속성을 더해주는 기능으로, 컴포넌트에 옵션을 추가하는 것이다.

비슷하지만 다른 (아이콘 + 텍스트 / 아이콘 + 텍스트 + 텍스트 등) 여러 컴포넌트를 만들 필요 없이, property를 이용해 경우의 수를 줄일 수 있다. 객체 온오프 옵션, 텍스트 수정, 인스턴스 수정 등 ...

프로퍼티에는 5가지 종류가 있다. 오른쪽은 사용 예시!

Text	지정된 텍스트 내용들만 변경할 수 있게 해준다.	옵션 추가
Boolean	선택한 레이어의 On/Off (보이기/숨기기)	옵션 추가
Instance Swap	안에 있는 컴포넌트를 다른 것으로 스왑 (아이콘, 이미지)	옵션 추가
Variant	컴포넌트의 상태 / 유형을 미리 정의해두고, 상황에 맞게 교체할 수 있다/ (버튼의 Hover / Pressed / Disabled ... 를 한 컴포넌트 안에 넣는다.)	커스텀
Slot	인스턴스 창고, 잦은 변경사항이 발생하는 영역을 잡는다.	커스

주의점!!!

- 메인 컴포넌트는 화면에 직접 사용하지 않고, 따로 빼서 관리를 한다. (파일에서 Asset으로 쓸 수 있다.)

- property 옵션 적용은 메인 컴포넌트에다가,

- property 옵션 확인은 instance에서 한다.

디자인 시스템은 레고블록 세트와 비슷하다. 미리 만들어둔 블록(component)를 조립해서 다양한 화면을 빠르고 일관성 있게 만드는 방식.

디자인을 할 때, 화면에서 반복적으로 사용되는 요소를 가장 작은 단위(아이콘/텍스트...)로 쪼개고, 각 요소들을 합쳐 모듈 > 템플릿 > 페이지를 구성한다.

여기에서 메인컴포넌트는...

- 스타일, 구조, 기본 상태를 결정하는 기준점이 된다.

- 컴포넌트 세트나 시스템 페이지에 정리한다.

Tip. 컴포넌트를 더 똘똘하게 사용하는 레이어명 정리 --> '/' 를 활용해 인스턴스 폴더 구분하기

Tip. Rename으로 여러 레이어 이름 한 번에 바꾸기 (Ctrl + R)

Tip. 컴포넌트 연결 해제를 하고 싶을 때는 우클릭 -> Detach instance, component 자체를 해제하고 싶을 때는 플러그인 사용

Tip. 컴포넌트를 실수로 지웠다면 -> Restore main component

텍스트, 불리언 프로퍼티

텍스트 Property 의 용도 -- 레이어가 여러겹으로 쌓여있을 때 한 번에 텍스트 수정이 우측 패널에서 가능하도록 도와주는 기능. 유사한 카드 레이어가 여러개를 늘어놓았을 때 매번 더블클릭해서 들어가기 귀찮기 때문에 Property 설정을 통해 편리하게 관리한다.

Boolean Property의 용도 -- On/Off, True/False 처럼 2개의 옵션을 왔다갔다 하는 (일반적으로 상태를 나타낸다) 프로퍼티 값을 나타낼 때 쓰인다.

인스턴스 스왑

: 바꾸고 싶은 인스턴스 (복사본)을 다른 인스턴스로 바꿀 수 있다.

: 이때, 교체하고 싶은 아이콘과 이미지도 컴포넌트 설정이 되어 있어야 한다.

실습을 진행했다. 아이콘 레이어명 앞에 'Icon/' 을 붙여서 폴더로 관리할 수 있도록 한다. 원본 파일이 어디에 있는지 유의하도록 하자.

막히거나 어려웠던 부분

인스턴스 스왑이나, 텍스트 프로퍼티 같은 기능들은 실제 업무에서 어떻게 사용되는지 경험해보고 싶다. 명확한 목적이 있으면 사용법이나 활용이 더 원활해질 것 같다는 생각이 들었다. 아직은 기능들을 적용하는 단계가 어색하다.

Varients는 다음에 더 깊이있게 다루고자 한다.

디자인 요소, 디자인 시스템 Case Study

JaneJaneKim — Thu, 18 Jun 2026 16:46:15 +0900

오즈코딩스쿨 14, 15일차 리뷰

디자인의 4단계 피라미드에 대해 배우고, foundation / variables를 피그마에 직접 적용해보며,

마지막으로는 브랜드들의 디자인 시스템마다의 특징을 스스로 분석해보는 시간을 가졌다.

14일차 : 디자인 Foundation, Variables

디자인 파운데이션
Design Foundation

디자인 파운데이션은 MVP project 과정 중 UXUI 설계에 해당한다.

I. 문제정의

- 시장조사

- 사용자 리서치

- 페인 포인트 도출

II. 아이디어 도출

- 브레인스토밍

- 개발 우선순위 선정 (mvp 기능 도출)

III. UXUI 설계

- DESIGN FOUNDATION

- 프로토타입 설계

IV. 개발 / QA

V. 배포

VI. 데이터 검증, 개선

Design Foundation 이란?

디자인 시스템의 기초가 되는 시각적 원칙을 정리한 기본 설계 기반

색상, 폰트, 그리드, 간격, 라운드값, (그림자) 등 UI의 최소단위 속성을 정의한 기준

장점

1. 일관성 유지 -- 시각적 정체성, 통일된 UX와 신뢰 제공

2. 접근성 유지 -- W3C 웹 콘텐츠 접근성 지침 기반

** W3C : World Wide Web Consortium, 웹을 구성하는 모든 기술이 같은 규칙 아래에서 동작하도록 정의하는 단체

3. 효율성 유지 -- 다양한 개발 환경 고려한 표준 규칙 / 규격 제공

디자인 시스템
Design System

설계구조

일반적인 구조는 위와 같다.

피그마에서의 Primitive 과 Semantic

Figma에서 Variable 탭에 들어갔을 때, 폴더를 만들 수 있다. 일반적으로 primitive 과 semantic으로 폴더를 나눈 뒤, 그 안에 세부적인 그룹으로 값을 나누어 관리한다. (color/number 등의 값 종류가 있다.)

Primitive Token (프리미티브 토큰)

- 모든 토큰 값의 시작 (raw value)

- 지정하는 것: 컬러, 타이포, 간격, Radius

- 디자인 founndation은 primitive token

- primary / secondary / gray 의 색상 팔레트, 타이포의 서체/굵기/사이즈, 간격 등의 수치를 지정한다.

Semantic Token (시멘틱 토큰)

- 프리미티브 토큰을 참조하여 사용 역할을 정의한 토큰

- 지정하는 것: 디자인에 실제 사용할 본품

- primary / secondary / gray 의 색상 팔레트, 타이포의 서체/굵기/사이즈, 간격 등의 수치를 지정한다.

Component (컴포넌트)

- 시멘틱 토큰을 참조하여 매우 구체적인 역할을 정리

- 시멘틱 토큰을 UI 컴포넌트에 적용 시 지정하게 되는 버튼 / 카드 ...

- 실제 컴포넌트 토큰은 개발에서 정의하는 경우가 많다.

Foundation 실습
- 타이포그라피
- 컬러
- 간격
- 레디우스

Typography의 primitive 요소

타이포그라피의 기본 속성값과 스타일 세팅 진행

플러그인 Text Styles Generator를 실행해 입력해두었던 텍스트를 자동으로 스타일로 등록할 수도 있다.

font-family	어떤 폰트를 쓸지	font-weight	굵기 (light ~ regular, 숫자값)
font-size	사이즈 (caption ~ heading)	line-height	줄간
font-style	normal / italic / oblique	letter spacing	자간

Heading1 이라는 글씨를 보았을 때, primitive는 모든 디자인 요소를 쪼개어 본 것이고, semantic은 이 '텍스트'(디자인에 들어갈 본체) 자체를 하나의 이름으로 정의한다.

색상의 기본 속성값과 베리어블 세팅

컬러의 기본 속성값과 스타일 세팅 진행

간격의 기본 속성값과 스타일 세팅 진행

단계	이름	설명
Base Grid point (기본 그리드값)	4배수
primitive	unit	숫자로 나타내며, unit 내부의 그룹에 숫자 값으로 등록한다.
sementic	spacing(padding, gap)	간격들 마다 종류를 폴더로 구분하여 세팅한다. ex) padding 폴더 / gap 폴더 (semantic variable 내부에)
	radius	둥글기

타이포그라피 실습을 진행한 이미지이다.

- Bold와 Regular 사이에 Semibold를 추가해서 스타일로 사용할 수도 있다.

컬러 실습을 진행한 이미지이다.

- 직접 Variable에 등록하려면 Primitive 폴더를 만들고, 그 안에 컬러 그룹을 만들어 넣는다.

그외 플러그인을 사용할 수도 있다.

- 플러그인 Color style Guide / Color Palette Generator

- 플러그인 Styles to Variable

Radius / Spacing도 실습을 진행했다. 아래는 실습에 참고했던 이미지이다.

- Primitive에는 Number를 등록하고,

- Semantic에 '값'을 등록한다. 이때 semantic 내부에는 두 개의 폴더를 만든다. -> Radius / Spacing

- Scope를 이용해 편집시 보이는 Value의 종류 수정 등을 해볼 수 있다.

Variable을 반영한 클론 디자인 실습

15일차(1) : 디자인 시스템

디자인 시스템
Design System

구조

Design 시스템은 일반적으로 보였던 피라미드의 4단계 구조가 모두 보이도록 설계하지만, 브랜드에 따라 달라진다.

디자인 피라미드에서 가장 스탠다드한 구조는 아래와 같다.

(- raw value)

- primitive

- sementic

- component

여기에서 브랜드가 중요하다고 생각하면 브랜드 그래픽을(Gmarket), 시각적 일관성이나 그래픽적인 통일감이 중요하다고 생각하면 그래픽(Line)을 추가하기도 한다.

수업에서는 4가지 예시의 디자인 시스템을 비교 분석하는 시간을 짧게 가져보았다.

유의미한 인사이트를 도출하기에는 많이 짧은 시간이었지만, 목차라도 훑어보고 내가 느꼈던 차이점에 대한 걸 이미지로 정리했다.

|| 디자인 시스템의 간략한 케이스 스터디 : Gmarket / Line / Toss

Case1. Gmarket -- 브랜드 정체성과 커머스 서비스로서의 사용성

큰 구조는 브랜드 / 파운데이션 / 컴포넌트로 나뉘어져 있었다. '브랜드' 탭이 있다는 것부터 벌써 차이가 느껴지긴 하지만,

Gmarket 특유의 브랜드 정체성을 살리기 위해 노력한 점이 보인다.

gmarket design system의 case 분류

또한 구체적인 케이스 분류를 통해 편리한 사용 경험을 제공하고자 각별히 유의한 것으로 느껴졌다.

이는 커머스 앱 자체가 익숙한 서비스이기 때문에 가능할 수도 있겠다는 생각이 들었다.

Case2. Line Design System (Messanger) -- 그래픽과 UX라이팅의 "일관성" 강조

라인의 UX 가이드라인 페이지

UX 가이드라인이 있는 것이 인상깊었다. 어떤 어떤 식으로 라이팅을 작성해달라는 지침이 구체적으로 정해져 있었다. 예로 Modal 가이드라인에 들어가면, normal view와 modal 창에서의 인터랙션 요소를 기능별로 정의해두었다.

똑같이 닫는 기능을 하는 인터랙션 요소라고 해도, normal view에서는 어떤 버튼으로 나타내야하는지 / modal view에서는 어떤 버튼으로 나타내야 하는지를 모두 일일히 정의해두었다.

또한 한 가지 더 인상깊었던 점은 Foundation 단계에서 Graphic을 정의하고 들어간다는 것이었는데, 이는 디자인 일관성을 기반에서부터 중요히 하고 있다는 인상을 주었다.

foundation 단계에서 그래픽을 정의하고 있는 Line의 Design System

Case3. Toss Design System -- 개발팀과의 협업성

토스는 첫창에서부터 디자인 시스템이 '왜' 존재하는지를 명확히 설명하고 있었다. 제품 제작의 효율성, 개발과의 연결성을 강조한다고 느꼈다. 디자인 시스템 자체의 항목을 많이 만들어 두기보다 만들어둔 시스템은 업무에 매우 실용적으로 이용될 것 같다고 느꼈다.

Toss의 강수영 디자이너 님께서 진행하신 강연을 본 적이 있는데, 토스가 세월에 걸쳐 UX나 그래픽, 개발에 관한 많은 기술들을 내재화 한 과정을 말씀해주셨다. 그래서 TDS를 서비스 사후에 구축했다고 말씀하셨던 것이 이해되는 구조였다. 업무상 필요하기 때문에 만들었고, 그렇기에 업무에 가장 효율적인 방안으로 채택하지 않았을까 막연한 추측을 해본다.

이렇게 색상 시스템을 패키지로 바로 설치해서 코드로 가져올 수 있다.

가장 그 모습이 직관적으로 드러난 건 타이포라고 느꼈는데, 거의 material design과 동일한 기준을 사용하여 '읽어도 되는 글과 읽지 않아도 되는 글'을 정의했다. 특정 디바이스들에서 너무 작은 글씨가 출력되지 않는다는 것을 디자인적으로 해석하여 써둔 것 같았다.

Figma로 반응형 디자인 만들기 - Constraints, Auto Layout

JaneJaneKim — Tue, 16 Jun 2026 11:54:19 +0900

오즈코딩스쿨의 13일차 수업 리뷰

아직 피그마 기초를 다루는 시간이다!

Auto Layout 사용해서 반응형 디자인 실습해보기

새롭게 배운 점 (from Grid 실습)

- 이미지 내부 설정이 Crop 이 아닌 Fill로 되어 있어야 반응형에 들어갔을 때 자동으로 정렬이 된다.

- 그리드에서 오른쪽의 콘텐츠 자동정렬을 해제해야 원하는 대로 디자인을 배열할 수 있다.

- 최대 / 최소 넓이를 지정했을 때 반응

새롭게 배운 점 (from Auto layout 실습)

- 내부의 Gap은 Auto로, 프레임은 Fill(가로의 경우 w를 Fill, 세로의 경우 h을 fill)로 설정해야 반응형을 했을 때 제대로 늘어난다.

Figma Constraints

프레임 크기가 달라질 때, 레이어가 어느 방향을 기준으로 유지되거나 늘어날지 정리하는 설정

어느 벽에 딱 붙어있을지 정하는 규칙!

주요 장점

- 작업 효율 : 화면 별로 디자인을 그릴 필요가 없다.

- 오류 방지 : 화면을 늘려도 요소가 겹치거나 찌그러지는 오류 방지

- 소통 명확 : 개발자에게 전달할 배치 규칙이 파일에 그대로 담긴다.

항목	설명	사용 예시
Left or Right	왼/오 가장자리에 고정	로고, 햄버거 메뉴, 앱 아이콘, 프로필 아이콘, 설정 등
Left + Right	가로 방향으로 늘어난다.	검색창, 콘텐츠 영역, 입력 필드
Center	중앙 고정	제목, 로고, 메인 콘텐츠 등
Top or Bottom	위/아래 가장자리에 고정	위) 헤더, 상단 바, 타이틀 영역 / 아래) 하단 탭바, 버튼, 푸터
Top & Bottom	세로 방향으로 늘어난다.	스크롤 가능한 콘텐츠, 세로 리스트, 사이드바
Scale	바깥 레이어 비율에 맞춰 크기가 달라진다.	이미지 영역, 지도, 반응형 배너

새롭게 배운 점

- 실습하면서 매체들을 어떻게 Constraint 하는지 배웠다.

- 전체를 frame으로 씌워야 한다. (rectangle 만들어서 X)

- 이미지를 비율에 맞게 조정하려면 상하좌우 모두 Scale을 적용해야 한다.

- 본문 텍스트는 Left / Top으로 조정을 하는 게 일반적이다.

막히거나 어려웠던 부분

- 적절한 min/max width 값을 감 잡는 것이 어렵다. 특히 가로 정렬을 했을 때, 의도했던 미관적인 배치를 위한 width 값의 조정을 하려면 감을 많이 잡아봐야 할 거 같다.

반응형과 적응형 레이아웃

반응형

하나의 코드로 모든 기기에 대응
해상도에 맞는 적절한 사이즈의 화면
모든 기기에 대응해야 하기 때문에 기기별 웹사이트가 적용되는 방식에 통제가 어려울 수 있다.

브레이크 포인트 (Break point) : 레이아웃이 변하는 특정 지점으로, *미디어 쿼리를 사용해 디자인이 전환되게 설정

*미디어 쿼리: 화면 크기나 해상도 등 조건에 따라 다른 스타일을 적용하는 CSS 기술
모바일 : 320 ~ 767 / 태블릿 : 768 ~ 1023 / 데스크탑 : 1024 ~ (pixel)

브레이크 포인트 지정 방법
- 해상도 점유율의 통계 수치를 확인후, 점유율이 가장 높은 해상도 선택 (Statcounter)
- 예시 사이트: Apple / 29cm / wadiz / toss / youtube / starbucks

반응형 디자인을 하는 이유

1. 디바이스의 유연한 대응

2. 유지 보수의 효율성

3. SEO(검색 엔진 최적화)에 유리 -- 유입 경로 분산을 방지 (단일 URL 사용, 적응형의 경우 /m이 달라진다.)

4. 일관된 UX

5. 비용 및 시간 절감

적응형

각 해상도에 맞춘 화면을 개별로 제작
기기별 최적화된 맞춤 디자인과 맞춤 경험 제공
초기 기획과 디자인이 편리
로딩 속도가 빠르다.
기기별로 화면을 따로 만들어야 해서 유지 보수에 불리
모든 기기에 대응이 어렵다.

+) 디자이너, 개발자 협업 프로세스

1. ASIS TOBE 기획 : to-be 기획 단계에서 디자이너가 개선방향 정의, 구현 가능 여부를 함께 검토

2. 경쟁사 및 디자인 레퍼런스 수집 -- 디자이너

3. IA 설계: IA 설계를 공유, GNB 기준으로 구성된 sub category를 개발자와 함께 확인

* GNB : Global Navigation Bar

* sub category : GNB의 메인 메뉴를 클릭하거나 마우스를 올렸을 때 펼쳐지는 하위 메뉴/세부 분류

4. 분기점 협의 및 화면 설계 : 개발자와 breakpoint 기준을 협의한 후, 화면 고도화 진행 /

5. QA(Quality Assurance) : 배포전, 해상도별 레이아웃이 정상적으로 동작하는지 / 인터랙션이 의도대로 구현되었는지 검수

실습 화면

최대 넓이 설정 (767/1920)

최소넓이 설정 (560 / 375)

더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초

JaneJaneKim — Mon, 15 Jun 2026 15:21:24 +0900

오즈코딩스쿨의 11~12일차 리뷰를 작성해보고자 한다.

11일차

-- IA/유저플로우/와이어플로우

-- Grid & Spacing Rule

-- 와이어프레임의 역할

더블 다이아몬드 프로세스

현업에서 가장 많이 쓰는 더블 다이아몬드 프로세스를 배우면서 시작했다.

이전에 리메인커리어에서 프로젝트를 진행했을 때에도, 동일한 방식으로 개인 프로젝트를 진행해본 경험이 있다.

Discover(발견) -- 데스크리서치에 해당한다. [발산]

방안) SWOT, BM 분석, 경쟁사 조사, 시장현황 파악, VOC(Voice of Customers) 수집, 오픈 서베이, 기사 자료, 정량(Surver), 정성(IDI)

Define(도출) -- 문제상황 > 인사이트를 도출한다. [수렴]

방안) 핵심타겟 정의 / Persona

Develop(구체화) -- 해결책을 구체화한다. [발산]

방안) 가설설정, UX전략, Project Goal, 아이데이션 (HMW), 우선순위 설정

Deliver(산출) -- 결과물을 산출한다. [수렴]

방안) IA, User Flow Chart, mvp 화면 설계 (와이어프레임), 프로토타이핑, UT(검증 목적), 기대효과

I.A. & 화면 설계서

다음으로는 Information Architecture 에 대해서 배웠다.

IA 작성 방식에는 정답이 없다. 정말 많이 IA를 그려보았지만, 구조가 비교적 명확한 서비스가 있는가하면, 허브들이 많은 앱도 있어서 유의 해야 하는 부분 같다. 실무에서는 구글 시트를 활용해 3~4 Depth까지 작성한다.

오늘은 오즈코딩스쿨에서 배운대로 IA의 작성방식을 정리해보겠다.

1. Main Category : 바텀 내비게이션 (하단 독바)를 메인 카테고리로 설정

2. Sub Category : 메인 화면에 보여지는 정보를 서브 카테고리로 설정

3. Depth : 서브 카테고리에서 페이지로 넘어가는 부분

+ 공통 영역 : 검색, 알림 등 동일한 기능

이런 형식

리메인커리어에서 배웠을 때 엑셀 시트로 화면 설계서를 작성하는 법을 배웠었는데, 이때는 화면에 보이는 요소들 하나 하나를 엑셀에 기재하였었다. 개발과의 협업을 염두했을 때 좀 더 기능적으로 앱을 보아야 하고, 포트폴리오에 실고자 하는 목적이라면 더 중요한 부분을 위주로 한 IA 작성이 시각화에 좋을 것 같다.

직접 IA를 그려보는 실습도 진행해보았는데, 나는 네이버 지도를 선택했다.

네이버 지도의 경우 하단 탭에 나와있는 게 주요 기능보다는 탐색에 전부 치중이 되어 있어서, 작성하는데 어려움이 있었던 것 같다.

User Flow

사용자가 Task(작업)을 완료하는 것을 기준으로 했을 때의 이용 경험을 중점적으로 본다.

즉, 서비스 내의 움직이는 경로를 설계한다.

-- 사용자 시나리오보다 구체적이다.

-- UI, 행동, 판단으로 표현한다.

구성 요소는 다음과 같다.

1. 목표 -- User goal

2. 작업 -- Task

3. UI

4. 행동 -- 사용자가 작업을 완료하기 위해 UI 상에 보이는

5. 판단

추후 학습 계획 기록)

개인프로젝트 중인 어플로 화면 설계서 그리는 연습 하기

12일차 -- 오토레이아웃

[1] Resizing Min/Max

-- 피그마에서 Min/Max 값을 설정 시, 주황색 가이드선이 나온다. 이를 통해 반응형 디자인을 구현할 수 있다.

[2] Ignore Auto Layout

-- 오토 레이아웃의 정렬을 무시한 뱃지(ui 요소) 등에 쓰인다.

새롭게 배운 점

반응형 디자인에 사용되는 min / max 값을 설정하는 법을 배웠다. 다양한 디바이스에 대응하려면 필수적인 기능일 것 같다.

또한 네이밍 센스나, 오토레이아웃을 씌우는 순서를 차근차근 배울 수 있어 좋았다. 내부 콘텐츠를 먼저 배치한 뒤 오토레이아웃을 씌우고, 그 뒤에 fill 값을 씌워야 두 번 일하지 않는 것 같다. (기존에는 공백의 구간만큼 rectangle로 먼저 잡아놓고 시작했는데 그 작업방식이 생각보다 불편하다는 걸 깨달았다.)

어려웠던 점

작업 속도가 나지 않아서, 단축키를 외워야 할 것 같다.

[단축키] 콘텐츠 편집

text 크기: ctrl + shift + [<] [>]
두 물체 가운데로 정렬 : alt + H / alt + V
작업 바 on/off : [`]
스포이드 : [i] 생각보다 계속 까먹고, 색을 일일히 마우스로 찍는데 시간 소요가 많이 된다

[단축키] 캔버스 이동

shift + 스크롤 : 가로로 이동
ctrl + 스크롤 : 확대 축소
space + 스크롤 : 세로로 이동
shift + [←]/[→] : 가로/세로로 빠른 이동
ctrl + [+]/[ - ] : 확대 축소

실습 진행

클론 디자인과, 카드 만들기 실습을 진행했다.

클론 디자인

실습 레이어

UI 화면 요소 종류와 이름

JaneJaneKim — Thu, 11 Jun 2026 17:11:56 +0900

오즈코딩스쿨의 10일차 수업 중 배웠던 UI 화면 요소 관련 내용만 따로 정리해보고자 한다.

탐색 & 이동 UI

사용자가 '지금 어디에 있는지, 다음에 어디로 갈지' 이해하게 만드는 요소들

브레드크럼

-- 현재 위치를 단계적으로 이해하게 만드는 경로 표시 요소

페이지네이션

-- 긴 목록을 여러 페이지로 나눠서 보여줄 때, 현재 위치와 다음 이동 범위를 알려주는 요소

인피니티 스크롤

-- 아래로 스크롤할수록 콘텐츠가 계속 자동으로 로드되는 방식

메뉴

-- 여러 기능을 모아 보여주는 메뉴 아이콘 패턴 (벤토 메뉴, 햄버거 메뉴, 미트볼 메뉴 ... )

입력 & 선택 UI

사용자가 입력, 선택, 상태 변경을 하는 interaction 요소

검색 필드 = Search Field (서치 필드)

-- 내비게이션이 길어질수록 더 강력한 우회 경로가 된다.

버튼

-- 역할에 따른 위계가 분명해야 하며, 가장 중요한 행동이 시각적으로 먼저 보여야 한다.

인풋 필드 (Input Field)

-- 라벨, placeholder, helper, error 가 각각 어떤 역할을 하는지 구분해서 설계해야 한다.

체크박스

-- 여러 항목 선택

-- 약관 동의 시 전체 선택을 한 번에 켜지게 하거나, 개별적인 선택이 중요한 항목(ex. Todo list) 동작 여부를 구분

라디오 버튼

-- 한 가지 항목만 선택

-- ex) 결제 수단

토글 / 스위치

-- 토글은 '지금 상태를 보여주는 것'이고, 버튼은 '다음 행동을 묻는 것'이다. (구분필요!)

-- 지금 상태를 보여주는 토글인지, 다음 행동을 묻는 버튼인지 구분해야 한다.

칩스 (Chips)

-- 작은 선택지나 상태를 가볍게 보여준다.

-- ex) 필터, 태그, 빠른 선택 UI / 눌러보고 바꾸는 흐름

선택 / 드롭다운

-- 여러 옵션 중 1개를 고를 때 쓰는 요소 (필터, 정렬, 옵션 선택)

콘텐츠 & 정보 표시 UI

정보를 어떻게 묶고 보여줄지 결정하는 요소들

아코디언 (Accordion)

-- 여러 정보를 접고 펼치며 보여줄 때 쓰는 구조

-- FAQ, 상품정보, 설정 메뉴 ... 정보량이 많지만 한 번에 모두 펼칠 필요는 없을 때

캐러셀 (Carousel)

-- 여러 콘텐츠를 가로로 넘기며 보여주는 방식

-- 사용자가 모든 콘텐츠를 확인하지 않을 가능성도 높아, 중요도가 높은 내용은 Carousel 안에만 숨겨두어서는 안된다.

-- 일반적으로 Indicator 와 함께 사용된다. (페이지 인디게이터 / 도트 내비게이션)

카드 (Card)

-- 정보를 하나의 덩어리로 묶어 보여줄 때 사용하는 UI

-- 제목, 설명, 가격, 버튼처럼 관련 있는 정보를 묶는다. (근접성의 원리)

리스트/테이블 (List/Table)

-- 정보를 순서대로 읽게 하고자 할 때는 List를,

-- 열 단위의 비교가 중요 할 때에는 Table을 사용하는 게 적절하다.

List는 “하나씩 읽기”에 좋다. 예를 들어 강의 목록에서는 사용자가 강의 제목과 설명을 보고 원하는 강의를 선택하면 된다.
Table은 “같은 기준으로 비교하기”에 좋다. 예를 들어 수강생 관리 화면에서는 여러 수강생의 출석률, 과제 제출 여부, 결제 상태를 한눈에 비교해야 하므로 Table이 더 적합하다.

아이콘

-- 그래픽을 통일하는 것이 중요하다.

-- 버튼이라면 텍스트나 Tooltip과 함께 보는 편이 안전하다.

프로필 / 아바타

-- 사람 중심 서비스에서 텍스트보다 사용자를 빠르게 구분하게 도와주는 요소

-- List, 협업 화면에서 자주 쓰인다.

상태, 피드백 & 오버레이 UI

사용자의 행동에 반응하고, 현재 상태를 알려주고, 집중을 유도하는 요소

뱃지

-- 상태 / 수량처럼 짧은 정보를 작게 붙여 보여준다. (아이콘 위에)

-- 너무 많아질 경우 시선을 분산시키므로, 중요한 정보 위주로 표기

툴팁(Tooltip)

-- 버튼 / 아이콘의 의미를 설명하는 정보 상자

-- Hover를 하거나, 짧은 탭을 이용한 Interaction과 함께

토스트/스낵바 (Toast / Snackbar)

-- 화면 아래쪽 / 한쪽에 보여주는 짧은 피드백 화면

-- 작업 흐름을 끊지 않는 알림 (ex. 임시 저장 되었습니다. / 북마크 되었습니다.)

모달/다이얼로그 (Modal / Dialog)

-- 현재 화면 위에 떠서 중요한 결정에 집중하게 하는 오버레이 UI로, 그 아래 화면을 조작할 수 없게 막는다.

-- 정말 중요한 것 위주로 사용

로더/스피너 (Loader / Spinner)

-- AI가 나오면서 많이 부각되는 UI로 지금 '처리 중'인 상태를 보여주는 요소

-- Spinner, Skeleton, Dot Loader를 상황에 맞게 사용

프로그레스바 (Progress Bar)

-- 사용자가 기다리는 시간이 길 때 (ex. 프로그램 설치 시) 안정을 줄 수 있는 장치

빈 상태 (Empty State)

-- 내용이 없을 때 '왜 없는지' '다음에 무엇을 할지' 에 대한 안내를 해주는 화면

패턴 & 심화 UI

여러 UI 요소가 실제 화면 안에서 조합되는 패턴

폼 (Form)

-- 입력 순서 > 오류 처리 > 완료 까지의 흐름이 중요하며, 여러 입력 요소가 한 목적을 위해 묶여 있다.

피커 (Picker)

-- 특정 값을 골라 입력하게 패턴으로, 선택이 안전한 값일 수록 더 적합하다.

-- ex) 날짜, 시간, 옵션 선택

슬라이더 (Slider)

-- 연속적인 값을 조절할 때 쓰이는 패턴

-- ex) 볼륨 / 밝기 / 가격 범위 / 거리

스테퍼 (Stepper)

-- 정수 단위로 수량 / 단계를 한 칸씩 늘리고 줄이게 하는 패턴

-- ex) 장바구니 수량 변경, 인원 변경

플로팅 액션 버튼 (Floating Action Button)

-- 화면 위에 뜬 주요 행동 버튼

-- 매우 강한 주목성을 가지기 때문에, 중요한 행동일 때에만 쓴다. (ex. SNS 커뮤니티에서 글쓰기 버튼 ... )

오늘 배운 내용을 바탕으로 UI 요소들에 네이밍을 짓고 그룹핑하는 실습을 해보았다.

디자인 기초 수업을 마무리하며 _ Class Review

JaneJaneKim — Tue, 9 Jun 2026 16:43:19 +0900

캠프를 들으며 했던 과제

캠프를 시작하기 전에는 전공에서 배웠던 디자인 이론을 다시 복습하는 시간이 되지 않을까 생각했다. 디자인 이론을 다시 점검하고, 정해진 커리큘럼 안에서 꾸준히 케어를 받는 정도로 기대하고 있었다.

그런데 막상 수업을 들어보니 예상보다 실습의 비중이 컸다. 개념을 듣고 바로 과제로 적용해보는 시간이 많았고, 피드백을 받으면서 내가 놓친 부분을 확인할 수 있었다. 혼자 책을 읽거나 자료를 찾아보며 공부할 때와는 달랐다. 같은 내용을 배우더라도 직접 만들어보고 수정하는 과정이 있으니 훨씬 오래 기억에 남았다.

수업 중 인상 깊었던 부분은 AI를 사용할 때의 접근 방식이었다. 이전에는 AI에게 원하는 내용을 한 번에 요청하고 결과를 받아보는 식으로 사용했다면, 수업에서는 사고 과정을 단계별로 나누어 정리하는 방법을 배웠다. 프롬프트를 어떻게 쓰느냐에 따라 결과가 달라졌고, 처음 나온 결과를 그대로 쓰기보다는 여러 번 수정하며 방향을 잡아가는 과정이 중요했다.

한 주 간 진행하고 피드백 받았던 일일과제들

한 주 동안 진행한 일일과제들도 기억에 남는다. 과제를 하면서 내가 알고 있다고 생각했던 내용도 실제 작업에 적용하려면 생각보다 많은 고민이 필요하다는 걸 알게 되었다. 특히 피드백을 받고 다시 수정하는 과정에서 결과물이 조금씩 나아지는 게 보여서 도움이 많이 되었다.

요즘은 UI/UX 디자이너라는 직무의 역할도 계속 바뀌고 있는 것 같다. 화면을 설계하는 것뿐만 아니라 사용자 경험, 제품의 방향, 비즈니스적인 관점까지 함께 고민해야 하는 일이 많아지고 있다. 그래서 프로덕트 디자이너라는 직무가 더 자주 이야기되는 것 같기도 하다. 배워야 할 것이 많아 막막하기도 하지만, 앞으로의 커리큘럼에서 필요한 역량을 하나씩 쌓아가고 싶다.

노션에 필기를 진행하면서 수업을 들었다.

수업을 들으면서는 노션에 꾸준히 필기를 남기고 있다. 나는 한 번 배운 내용을 시간이 지나면 쉽게 잊어버리는 편이라, 이번에는 그냥 지나치고 싶지 않았다. 필기를 정리하고 블로그 글로 다시 써보니 그날 배운 내용을 한 번 더 떠올릴 수 있었고, 내가 어떤 부분을 이해했고 어떤 부분이 아직 부족한지도 확인할 수 있었다.

게슈탈트의 이론

JaneJaneKim — Mon, 8 Jun 2026 21:08:52 +0900

오즈코딩스쿨의 7일차 교육 리뷰

오늘 앞전 시간에는 Suno AI를 이용해 영화씬에 어울리는 음악을 생성해보고, 프로필 사진 제작을 해보았다.

두번째 시간부터 디자인 이론과 심리학에 대해 배워보았다.

오늘 배운 이론의 내용이 그렇게 많지는 않아서, 간단한 정리로 마칠 수 있을 것 같다.

근접성의 원리

-- 가까이에 있는 것들은 그룹으로 보인다.

-- 관련 있는 정보는 가까이, 관련 없는 정보는 멀리 배치한다.

유사성의 원리

-- 비슷하게 생긴 것들은 같은 그룹으로 보인다.

-- 같은 기능은 같은 디자인, 같은 카테고리는 같은 색상 / 일관성을 유지한다.

연속성의 원리

-- 시선이 자연스럽게 흐르는 방향으로 요소들을 연결해서 본다.

-- 수평/수직 메뉴 구조, 탭 디자인, 타임라인 등

폐쇄성의 원리

-- 불완전한 형태도 뇌가 자동으로 완성해서 인식한다.

-- 빈공간과 간격을 채워 전체를 파악하는 완치 경향이다.

전경-배경의 원리

-- 어떤 것은 주인공, 나머지는 배경으로 인식

----

AI로 그래픽 만들기 _ Class Review

JaneJaneKim — Fri, 5 Jun 2026 18:22:59 +0900

도입 -- 오즈코딩스쿨의 프로덕트 디자이너 부트캠프 과정 6일차 수강 후기

수업을 수강한지 어느덧 6일차이다.

점점 수업 시간에 필기를 하면서 겸사겸사 블로그를 쓰기가 어려워지는 것 같다.

그만큼 배울 내용도, 팔로업할 내용도 많아서 스스로 탐색 해본 뒤 소감을 적어올리게 되는 것 같다...ㅎㅎ

. . .

부트캠프를 시작하기 전에, 초반의 내용이 너무 많이 겹치면 어떡하나 걱정이 앞섰었는데, 오히려 내가 약하다고 생각하는 디자인에 대한 기초 지식이나, ai를 다루는 시간들이 꽤 많아서 약점 보완을 독톡히 하는 것 같다. 다방면으로 공부할 게 많은 IT 업계에서 살아남기 위해, 계속해서 열심히 수강 하고싶다는 생각이 들었다. ㅎㅎ

부트캠프들을 여럿 볼 때, UX 이론을 먼저 가르쳐주는 곳이 있었고, 디자인 기초를 먼저 가르쳐주는 (지금 내가 듣는 오즈코딩학원의 과정이 그렇다) 커리큘럼이 있었는데, 오히려 디자인의 색이 강한 커리큘럼이 나에게 잘 맞았다는 생각이 든다.

그럼 오늘도, 배운 내용을 되짚어보고 과제 리뷰를 올려보도록 하겠다. 화이팅!

#1 AI로 SNS 콘텐츠 분석하기

내 디자인 결과물을 피드백 받아볼 기회는 그리 흔하지 않다. 특히나 언제나 모호하다고 느껴지는 시각적 완성도 방면에서는, 누군가의 조언이 절실할 때가 있다. 그럴 때 AI를 활용해볼 수 있는 프롬프트들을 첫시간에 공유해주셨다.

나 같은 경우 지난 시간에 CJ ONE의 포인트 제도에 대한 정보성 카드뉴스를 제작했기 때문에, 구체적인 프롬프트 항목에서 몇 가지는 감안하거나 수정할 필요가 있었다.

STEP1. 핵심 타겟 관점에서 분석하기

**STEP01. 핵심 타겟 관점에서 분석하기**
첨부한 카드뉴스 N장을 잠재 고객의 관점에서 분석해 줘.

평가 기준:
1. 첫인상(3초 안에 관심을 끌 수 있는가?)  
2. 정보 전달력(필요한 정보가 명확하게 전달되는가?)  
3. 감정적 공감(브랜드의 메세지에 공감되는가?)  
4. 행동 유발(댓글, 저장, 공유하고 싶은 마음이 드는가?)  
5. 신뢰도(정보는 믿을 만한가? 전문성이 느껴지는가?)  

항목별로 각각 100점 만점으로 점수를 매기고, 
개선 방향을 구체적으로 제시해 줘

STEP2. SNS 성과 예측 분석하기

**STEP02. SNS 성과 예측 분석하기**
이 카드뉴스를 인스타그램에 업로드했을 때의 성과를 예측해 줘.

예측 항목:
1. 도달률(얼마나 많은 사람이 볼까?)  
2. 참여율(좋아요, 댓글, 저장 비율)  
3. 저장률(북마크 저장 비율)  
4. 공유율(스토리 공유나 DM 전송 비율)  
5. 팔로워 증가(새 팔로워 유입 예상)  

각각을 예측하는 근거와 함께 성과를 높일 수 있는 개선안도 제시해 줘

STEP3. 댓글 반응 시뮬레이션

**STEP03. 댓글 반응 시뮬레이션**
이 카드뉴스에 달릴 수 있는 댓글들을 시뮬레이션해 줘.  
--
댓글 유형별로:
1. 긍정적 반응 댓글 5개  
2. 궁금증이나 질문 댓글 5개  
3. 우려나 비판적 시각 댓글 3개  
4. 경험 공유 댓글 3개  

각 댓글에 대한 적절한 답변도 함께 준비해 줘. 브랜드 톤에 맞게 친근하지만 전문적으로
첨부한 카드뉴스 3장을 <<핵심타겟>>의 관점에서 분석해 줘.

STEP4. 장기적인 브랜딩 관점 검토

**STEP04. 장기적인 브랜딩 관점 검토**
이 카드뉴스가 <<브랜드명>>의 장기적인 이미지 구축에 미치는 영향을 분석해 줘.  
--
검토 사항:
1. 브랜드 아이덴티티의 일관성(우리가 추구하는 이미지와 일치하는가?)  
2. 차별화 요소(다른 <<동일 산업군>> 브랜드와 구별되는가?)  
3. 신뢰도 구축(전문성과 신뢰감을 쌓아 가고 있는가?)  
4. 타깃과의 유대감(우리 고객들과의 관계가 깊어지고 있는가?)  
5. 확장성(콘텐츠를 이런 방식으로 계속 만들 수 있는가?)  

장기적인 관점에서 개선하거나 강화해야 할 부분을 제시해 줘

두번째 시간부터 본격적으로 디자인에 대해서 배울 수 있었다.

UXUI의 이론과 사용성, 기획력에 대해 생각하다보면 오히려 본질적인 '심미성'을 놓치게 되는 경우가 많은 것 같다.

나의 경우가 그렇다 ... ㅎ 필요할 때마다 종종 찾아보는 UI 디자이너 유튜브 중 Madia Designer 이 있는데, 해당 영상에서도 기본적인 디자인을 못하고 UX 이론만 내세우는 사람들이 많다는 이야기를 하셨었다.

아무튼, 그래서 새로운 디자인 기법들이나 트렌드들, 레퍼런스들을 꾸준히 보는 게 중요하다는 것이었는데, 오늘 수업 내용에서 디자인 트렌드와 이를 살펴볼 수 있는 사이트들을 정리해주셔서 좋았다.

#2 2026 Graphic Design Trends

나 같은 경우 이런 디자인 트렌드 키워드들이 Pinterest 이미지 서치에 상당한 도움이 되었던 것 같다. 아니나 다를까, pinterest predicts에서 이미지 트렌드를 매년 예측하는 것이었다!

출저: pinterest

Keyword1. Extra Celestial

우주, 미래, 코즈믹 비주얼

홀로그램, 오팔, SF 감성

— Extra (~너머의) + Celestial (천상의, 하늘의, 우주의)11

해석

— 경제 침체, 기후 위기, 빠른 기술 변화로 예측 불가능한 시대

— 안정된 미래를 전제로 한 계획 자체가 어려움

— 특히 Z세대 / 밀레니얼은 확실한 답보다 열린 해석을 선호한다.

예시

패션 브랜드 / 음악 앨범 커버 / 게임 콘텐츠 등에서 이런 디자인 트렌드를 많이 확인해볼 수 있다.

출저: instagram Nicole Miller nyc

Keyword2. Cool Blue (쿨 블루)

— 차갑고 절제된 세련미 (’영하의 세련미’)

— 감정을 과하게 드러내지 않고, 한 발 물러난 거리감 유지.

예시

Steel gray / Cold blue / Silver Gray 처럼 만지면 차가울 것 같은 느낌의 색을 쓴다.

밀레니얼과 Z세대가 다방면에서 영하(감정)의 트렌트를 추구하고 있다고 한다.

이 세대 자체의 트렌드라고도 볼 수 있다.

출저: Pinterest

Keyword3. Gimme Gummy

고무 / 젤 같은 탱글한 질감

디지털에서도 물성을 느끼게 하는 디자인 트렌드

화면을 너머 촉각적 인지를 유도

해석

시각 중심의 디자인 → 촉각 중심의 경험 디자인으로 확장

보는 것에서 느끼는 것으로 변화

예시

ASMR, 슬라임 영상 …

Keyword4. Pen Pals (펜 팔스)

편지 쓰기 트렌드 (느린 우편)

정성스러운 봉투, 문구류, 우표

의미

느린 소통과 과정 중심의 회귀

디지털 속도에 대한 반작용

예시

다꾸 / 종이 질감의 텍스처 / 핸드크래프트 무드 / 빈티지 타이포

트렌드 파악에 도움이 되는 사이트

Pinterest Predicts : https://business.pinterest.com/ko/pinterest-predicts/2026/gimme-gummy/

Gimme Gummy | Pinterest Predicts™ 2026

In 2026, everything gummy is yummy. Expect rubbery jewelry, elastic cheek tints…and even bendy phone cases.

business.pinterest.com

Design + : https://design.co.kr/

디자인플러스 | Design＋

디자인플러스는 사회 전반에 걸쳐 변화를 모색하는 혁신가를 위한 새로운 플랫폼입니다. 네이버디자인을 담당해온 디자인프레스와 종합 디자인 전문 매거진 월간 〈디자인〉이 공동 운영합니

design.co.kr

#3 미드저니로 영상 만들기

1단계. 레퍼런스 찾기

2단계. GPT로 프롬프트 작성하기

3단계. Midjourney / GPT 활용 하여 캐릭터 제작하기

4단계. Midjourney를 활용해 영상을 생성하기

오늘 수업의 꽃, 미드저니 활용에 대해서 배웠다.

언제나 그렇지만 레퍼런스를 찾는 것이 가장 중요하다고 강조하면서, 좋은 레퍼런스를 찾는 방법에 대해서도 알려주셨다.

한 가지 배운 점이 있다면, 이미지도 카테고라이징화 하는 눈을 기르는 게 중요하다는 것이다.

강사님께서 수업시간에 공유해주신 좋은 레퍼런스 찾는 팁은 질감과 형태를 구분해서 보는 것이다.

-- 질감: 스타일 레퍼런스

-- 형태: 이미지 레퍼런스

검색하는 키워드

**검색 키워드**
- 스타일 : 3D / 2.5D simple minimal cotton stylized flat clean
- 형태 : monster person cat dog man woman round cron
- 질감/표현 : soft smooth **fluffy/fur** glossy glass
- 성격/컨셉 : cute cheerful happy calm quirky goofy shy friendly mysterious
- 색감/톤 : colorful pastel muted warm soft·toned fire water 
(조합 예시 -- character 3d fur calm warm simple)

레퍼런스를 참고할 만한 사이트도 정리해주셨는데, 나 같은 경우 이미지 레퍼런스를 찾을 때 pinterest를 주로 사용하기는 한다.

Pinterest	이미지 기반의 아이디어 탐색 플랫폼 / 다양한 분야의 레퍼런스가 풍부
COSMOS	사용자가 저장한 데이터를 기반으로 개인화 맞춤 추천
BEHANCE	포트폴리오 플랫폼
Dribble	UI, 그래픽, 인터랙션 등의 한 컷 디자인
Designspiration	Pinterest와 유사한 이미지 큐레이션 플랫폼. / 색상 기반의 검색

프롬프트 작성의 팁에서 새롭게 배운 점

-- 형용사와 명사를 결합 했을 때, 대상의 분위기나 성격을 표현하는 게 효과적이다.

-- 나타내고 싶은 결과 (부정어 사용 보다 긍정어 사용) 를 핵심적으로 강조하자.

-- 쉼표를 사용해서 키워드를 끊어주는 것이 통상적인 원칙이다.

미드저니: 새로운 캐릭터 생성에 유리
-- 강점: 창의성, 예술성
-- 단점: 캐릭터 일관성 유지 떨어짐

GPT: 캐릭터 구체화
-- 강점: 캐릭터 고정, 간결한 프롬프트로 요소만 변경 가능
-- 단점: 창의성 부족

TIP. GPT로 첫프레임과 끝프레임을 생성한 뒤 영상을 만들기!
구체적인 방향이 없다면 계속해서 뽑아냈을 때 오히려 퀄리티 저하가 일어날 수 있다. 따라서 명확한 방향을 정해두고 프롬프트를 다듬어 가면서 작업하는 것이 훨씬 효율적이다.

#실습1 __ AI 캐릭터와 영상 만들기

**이미지 레퍼런스**
cute character, rabbit, 3d, small, bubble effects --ar 3:4 --raw --stylize 50

u6661112853_A_cute_plush_3D_rabbit_gently_hops_forward_with_s_7837eaf8-bc43-4659-9ceb-a84cdc0af6b0_0.mp4

2.76MB

#실습2 __ 그래픽 디자인 트렌드를 반영한 영상만들기

내가 반영한 키워드는 Extra Celestial 이다. 다음과 같은 특징을 살리고자 하였다.

— 우주, 미래, 코즈믹 비주얼

— 홀로그램, 오팔, SF 감성

**이미지**

A single floating glass planet as the hero object, translucent opalescent crystal texture, miniature galaxy sealed inside, sparkling star particles and champagne gold cosmic dust glowing within, delicate glass orbital ring, pearl white icy blue lavender pale pink holographic silver reflections. Surrounding background includes soft layered holographic rings, faint orbital line graphics, floating translucent spheres, suspended micro-crystals, subtle pearl particles, gentle vertical light threads, and airy mist. Bright misty pale silver-blue studio background, soft bokeh lights, pearlescent glow, elegant minimal sci-fi luxury aesthetic, object-centered composition, slow cinematic camera push-in, shallow depth of field, dreamy bloom, volumetric glow, ultra detailed --ar 16:9

하나의 떠 있는 Glass Planet이 메인 오브젝트로 등장한다. 반투명 오팔빛 크리스털 질감, 내부에 봉인된 작은 은하, 반짝이는 별 입자와 샴페인 골드빛 우주 먼지, 섬세한 유리 궤도 링, 펄 화이트, 아이스 블루, 라벤더, 연한 핑크, 홀로그램 실버 반사광. 주변 배경에는 부드럽게 겹쳐진 홀로그램 링, 희미한 궤도 라인 그래픽, 떠다니는 반투명 구체, 매달린 듯한 마이크로 크리스털, 은은한 펄 입자, 세로로 흐르는 빛의 실, 공기감 있는 안개가 배치된다. 밝고 안개 낀 페일 실버 블루 스튜디오 배경, 부드러운 보케 조명, 펄빛 글로우, 우아하고 미니멀한 SF 럭셔리 미학, 오브젝트 중심 구도, 천천히 다가가는 시네마틱 카메라, 얕은 심도, 몽환적인 빛 번짐, 볼류메트릭 글로우, 초정밀 디테일.

**영상**

A dazzling cinematic video of a floating opalescent glass planet in a bright celestial studio space. The planet rotates slowly while its transparent surface catches shifting rainbow highlights, and a miniature galaxy glows inside with sparkling stars and champagne gold cosmic dust. Multiple delicate glass rings orbit around it in layered motion, leaving luminous holographic trails. Golden stardust blooms from the core, pearl particles scatter through the air, micro-crystals shimmer, translucent spheres drift softly, and vertical light threads sparkle in the misty pale silver-blue background. Add iridescent lens flares, radiant bokeh, soft volumetric glow, elegant sci-fi luxury mood, dreamy celestial atmosphere, graceful camera push-in, subtle parallax, hero object centered, magical and glamorous, ultra detailed --ar 16:9

밝은 천체적 스튜디오 공간 안에 떠 있는 오팔빛 Glass Planet을 담은 화려한 시네마틱 영상. 행성은 천천히 회전하며 투명한 표면에 변화하는 무지갯빛 하이라이트를 반사하고, 내부에는 작은 은하와 반짝이는 별, 샴페인 골드빛 우주 먼지가 빛난다. 여러 겹의 섬세한 유리 링이 행성 주위를 회전하며 빛나는 홀로그램 트레일을 남긴다. 중심부에서는 골드빛 별가루가 피어나고, 펄 입자가 공중에 흩날리며, 마이크로 크리스털이 반짝이고, 반투명 구체가 부드럽게 떠다닌다. 안개 낀 페일 실버 블루 배경에는 세로 빛줄기가 반짝인다. 이리데슨트 렌즈 플레어, 빛나는 보케, 부드러운 볼류메트릭 글로우, 우아한 SF 럭셔리 무드, 몽환적인 천체 분위기, 부드러운 카메라 푸시인, 미세한 패럴랙스, 중앙의 메인 오브젝트, 마법적이고 글래머러스한 초정밀 영상.

#추가학습 및 느낀점 __ 오늘 배운 내용을 반영해 AI agent 생성하기

만들어본 AI Agent

오늘 배운 단계적인 수순을 시스템화 하면 편할 것 같아서, 강의자료 내용을 반여한 GPT Agent를 만들었다.

앞으로 영상 제작을 할 일이 생길 때 반복적인 프로세스를 지시하는 대신, 스킬 등록을 하면 편리할 것 같다.

대표적으로 추가한 스킬은, 레퍼런스 이미지를 여러 개 보냈을 때 공통적인 형태나 질감을 분리하여 묘사해주는 스킬을 등록하였다. 이로서 프롬프트 정교화에 조금 더 도움이 되지 않을까 싶다.

조금 더 추가적으로 내가 느낀 점을 작성해보자면,

-- ChatGPT에게 영화에 넣을 만한 시나리오 스틸컷을 받을 때, "한 스틸컷에는 한 가지 정보"를 넣는 것이 좋다.

GPT에게 처음 스틸컷에 넣을만한 장면을 서술해달라고 요청 했을 때, 스토리를 담으려 하다보니 많은 정보를 한 장면에 넣으려고 하길래 수정을 해서 다시 주었다. 이 내용 역시 Agent에게 행동 지침으로 저장하였다.

GPT와 나눈 대화 일부

영상을 제작할 때 한 개의 이미지만 넣으면 원하는 동작을 전부 서술해도 원하는 퀄리티대로 나오지 않는다.

뿐만 아니라, 스틸컷으로 하이라이트 이미지들만 뽑아내는 것보다는, 유사한 이미지들을 넣어서 미드저니에게 Start / End Frame으로 넣는 작업 방식이 영상 자체는 더 자연스럽게 뽑히는 것 같다. AI드라마를 종종 숏폼 플랫폼에서 만나고는 하는데, Omni Reference에 캐릭터 렌더링 사진을 넣고 이런 식으로 작업할 것 같았다.

토큰이 부족해질까봐 전부 시도해보지는 못하고 마지막 영상에만 시도해봤는데, 가장 결과물이 마음에 들게 나왔다.

ChatGPT가 인물이나 요구사항의 구체적인 특징을 잘 살리고 있다는 것이 느껴졌다. 영상에 등장하는 인물들의 디테일을 다 묘사할 수 있다면 더 좋은 퀄리티의 영상을 만들어볼 수 있을 것 같다.

여러 개의 이미지를 이어붙여서 영상을 만들었다.

AI 활용 기획 (3) - 디자인 실무 _ Class Review

JaneJaneKim — Thu, 4 Jun 2026 18:25:07 +0900

AI를 업무에 광범위하게 활용하는 법에 대해서 배웠다.

1. 클라이언트의 말 해석하기

가장 먼저 디자인 지식이 없는 클라이언트로부터 요청을 받았을 때, AI를 활용하는 법에 대한 프롬프트를 몇 개 공유해주셨다.

디자인에 대한 지식이 부족한 클라이언트라면 흔히 할 수 있는 모순된 말의 의도를 해석하거나, 모순된 단어쌍을 미리 받아보는 시도 등을 해볼 수 있었다.

포스터 제작을 맡았는데 클라이언트로부터 이런 요청이 들어왔어. 이걸 어떻게 해야 할까? 
해석의 방향 5가지를 제안하고 가장 가능성 있는 안을 근거와 함께 1개만 추천해 줘. 
또한 그 안과 비슷한 예시 이미지를 pinterest 링크로 첨부해 줘

"브랜드 포스터를 화려한데 심플하게 제작해 주세요"

디자인 실무에서 클라이언트가 자주 요청하는 상반되는 느낌을 표현하는 단어 쌍을 50개 리스트로 만들어 줘. 또 이것들을 분류하는 기준을 5가지 정도 제시하고, 어떻게 해석하면 될지 기준별로 가이드를 제공해 줘.

ex) 화려한데 심플하게, 차가운데 따뜻하게, 전통적인데 현대적으로

2. GPTs 사용해서 업무 특화 에이전트 만들기

두번째 시간에는 GPTs를 활용해서 업무에 특화된 AI를 만들어보는 작업을 하였다.

GPTs란?

GPT는 범용 AI이기 때문에 업무에 특화되어 있지는 않다. GPTs는 업무에 특화된 AI 도우미를 만드는 과정이다. 실제 실무에서도 프롬프트나 토큰을 줄이는 작업이 중요해졌기 때문에, 여러가지의 Skill로 저장을 한 뒤 GPT에게 바로 소환할 수 있는 형태로 쓰는 것이 중요해진다.

실습에서는 미드저니를 위한 프롬프트를 만드는 GPTs 를 만들어보았다.

4단계에 걸쳐 미드저니에게 제공할 메타 프롬프트를 제공하는 에이전트를 만들고 직접 활용해보았다.

수업시간에 제공된 프롬프트를 활용해 GPTs를 이용해서 만들어본 에이전트.

1단계. 챗GPT에게 30개의 키워드 사진을 생성

표현	색상	형태 / 레이아웃	타이포그래피	이미지 / 그래픽 요소	모션 / 인터랙션
따뜻한	크림, 베이지, 코랄, 웜 오렌지	둥근 모서리, 여백 넉넉함	부드러운 산세리프, 약간 둥근 글꼴	햇빛, 패브릭, 나무, 손글씨 느낌	느린 페이드인, 부드러운 호버
차분한	그레이블루, 세이지, 아이보리	균형 잡힌 정렬, 낮은 대비	얇거나 중간 굵기, 넓은 행간	잔잔한 풍경, 물결, 흐릿한 배경	느리고 안정적인 전환
고급스러운	블랙, 딥네이비, 골드, 샴페인	넓은 여백, 대칭, 미니멀	세리프, 얇은 굵기, 큰 자간	대리석, 금속, 하이엔드 제품 컷	미세한 패럴랙스, 느린 등장
귀여운	파스텔 핑크, 라벤더, 민트	둥근 버튼, 작은 장식 요소	둥글고 통통한 글꼴	캐릭터, 스티커, 말랑한 아이콘	바운스, 통통 튀는 효과
신뢰감 있는	블루, 네이비, 화이트, 라이트그레이	그리드 정렬, 명확한 정보 구조	단정한 산세리프, 적당한 굵기	체크 아이콘, 인증 배지, 실제 사용 장면	즉각적이고 예측 가능한 반응
전문적인	네이비, 차콜, 화이트	카드형 구조, 데이터 중심 레이아웃	중립적 산세리프, 명확한 위계	차트, 대시보드, 문서, 업무 장면	절제된 트랜지션
활기찬	옐로우, 오렌지, 라임, 핫핑크	비대칭 배치, 큰 CTA	굵고 역동적인 타이포	사람, 활동 장면, 패턴	빠른 슬라이드, 스케일업
경쾌한	밝은 블루, 민트, 옐로우	가벼운 여백, 리듬감 있는 배치	산뜻한 산세리프, 중간 굵기	점, 선, 간단한 일러스트	짧은 바운스, 스냅 모션
감성적인	로즈, 브라운, 크림, 딥그린	느슨한 정렬, 여백 많은 구성	세리프, 손글씨, 얇은 글꼴	필름 사진, 노이즈, 빛 번짐	천천히 나타나는 페이드
미니멀한	화이트, 블랙, 라이트그레이	요소 최소화, 넓은 여백	얇고 깔끔한 산세리프	단순한 선 아이콘, 제품 중심 이미지	거의 없거나 아주 미세한 모션
대담한	레드, 블랙, 형광 컬러	큰 면 분할, 강한 대비	초대형 볼드 타이포	강한 클로즈업, 거친 그래픽	빠른 컷, 강한 스케일 변화
몽환적인	라벤더, 페일블루, 실버, 그라데이션	흐릿한 경계, 레이어 중첩	얇고 긴 자간	구름, 빛, 유리, 오로라	느린 블러, 플로팅 모션
청량한	스카이블루, 화이트, 민트	시원한 여백, 수평적 구성	가볍고 또렷한 산세리프	물, 하늘, 얼음, 투명 소재	맑게 전환되는 페이드
강렬한	블랙, 레드, 네온그린	큰 대비, 사선, 압축된 구성	굵고 좁은 글꼴	불꽃, 빛, 고대비 사진	즉각적인 등장, 글리치
친근한	웜베이지, 소프트블루, 피치	둥근 카드, 자연스러운 정렬	읽기 쉬운 산세리프	사람 얼굴, 손, 대화 장면	부드러운 마이크로 인터랙션
세련된	모노톤, 딥브라운, 오프화이트	정교한 그리드, 절제된 장식	얇은 세리프 또는 모던 산세리프	패션 컷, 제품 디테일, 추상 오브젝트	느리고 매끄러운 전환
미래적인	블랙, 실버, 네온블루, 퍼플	유리질 패널, 다크 UI, 격자	기하학적 산세리프	홀로그램, 3D 오브젝트, 라이트 라인	글로우, 스캔, 패럴랙스
자연스러운	올리브, 샌드, 브라운, 아이보리	비정형 곡선, 여유로운 배치	부드러운 산세리프, 낮은 대비	식물, 흙, 종이, 자연광	천천히 흐르는 모션
깨끗한	화이트, 라이트블루, 민트	정돈된 그리드, 충분한 여백	얇고 명확한 산세리프	투명한 소재, 물방울, 단순 아이콘	깔끔한 페이드, 슬라이드
안정적인	네이비, 딥그린, 그레이	수평·수직 정렬, 단단한 박스 구조	굵기 변화 적은 글꼴	건축물, 방패, 체크 심볼	움직임 적고 예측 가능
우아한	아이보리, 더스티핑크, 와인, 골드	곡선, 넓은 여백, 섬세한 선	세리프, 얇은 웨이트	꽃, 패브릭, 주얼리, 부드러운 질감	천천히 흐르는 모션
재미있는	원색 조합, 컬러 블록	불규칙한 배치, 스티커식 구성	개성 있는 디스플레이 폰트	이모지, 캐릭터, 낙서	튀는 애니메이션, 랜덤 효과
진지한	차콜, 네이비, 다크브라운	정렬 엄격, 장식 최소화	단정하고 무게감 있는 글꼴	흑백 사진, 문서, 인물 클로즈업	거의 없음, 절제된 전환
혁신적인	블루퍼플, 네온, 블랙	비정형 그리드, 입체 구성	테크 계열 산세리프	3D, 데이터 시각화, 추상 그래픽	모핑, 인터랙티브 반응
편안한	크림, 라이트그린, 소프트브라운	낮은 밀도, 큰 여백, 둥근 형태	부드럽고 읽기 쉬운 글꼴	소파, 자연광, 일상 사진	느린 페이드, 완만한 이동
힙한	블랙, 실버, 형광색, 빈티지톤	겹침, 비대칭, 잡지식 구성	굵은 산세리프, 콘덴스드 폰트	스트리트 사진, 노이즈, 콜라주	글리치, 빠른 전환
레트로한	머스타드, 브라운, 오렌지, 틸	박스형 레이아웃, 장식 테두리	둥근 세리프, 빈티지 디스플레이	오래된 포스터, 질감, 하프톤	필름 흔들림, 아날로그 효과
프리미엄한	블랙, 에스프레소, 골드, 오프화이트	적은 요소, 큰 제품 이미지	얇고 정제된 타이포	하이엔드 제품 컷, 음영 깊은 사진	느린 줌인, 고급스러운 페이드
몰입감 있는	다크톤, 딥블루, 퍼플	전체 화면 이미지, 깊이감 있는 레이어	큰 제목, 낮은 보조 텍스트 대비	시네마틱 이미지, 공간감, 빛과 그림자	패럴랙스, 스크롤 기반 전환
명확한	화이트, 블루, 블랙	강한 정보 위계, 단계형 구조	굵기 차이가 분명한 산세리프	아이콘, 번호, 다이어그램	상태 변화가 즉시 보이는 인터랙션

2단계. GPTs로 만들 초안 생성

3단계. GPTs로 구성하기

아트 매거진 커버를 위한 초현실적이고 실험적인 그래픽 아트워크를 만들고 싶어. 꿈 같은 분위기와 예술적 콜라주 스타일을 결합해서 미드저니 프롬프트를 만들어 줘.

다음 세 가지 형용사와 매칭되는 비주얼 요소를 영문으로 각각 알려 줘 → 초현실적, 실험적, 예술적.

위 프롬프트에 [감성적, 몽환적, 예술적]을 50% 반영하여 다시 작성해 줘. 다양한 실험을 할 수 있도록 프롬프트별로 적절한 파라미터를 골라 모두 다르게 조합해 주세요.

4단계. 미리보기 하면서 잘 나오는지 확인하기

메타 프롬프트를 이용해 미드저니로 만든 이미지

surreal experimental graphic artwork for an art magazine cover, dreamlike artistic collage style, layered paper cutouts, abstract human silhouette, floating eyes, fragmented flowers, soft clouds, transparent glass shapes, torn magazine textures, subtle grain, blurred edges, overlapping compositions, lavender, pale blue, silver, ivory and deep indigo color palette, elegant editorial layout, central vertical composition, wide negative space for magazine masthead, thin serif typography placeholder, avant-garde contemporary art direction, poetic and mysterious mood, soft diffused lighting, high-detail mixed media texture, refined visual balance, museum-quality graphic design, cinematic depth, ethereal atmosphere --ar 2:3 --v 6.1 --style raw --s 350

일관되고 독특한 디자인 뽑아내기 : 끝에 --sref random 을 붙이기

3. 콘텐츠 기획을 위한 AI를 이용하기 + 실습!

오늘은 AI를 이용해서 제품 디자인 사진을 만들고, 브랜드 아트워크를 만들어보는 작업을 하였다. 나는 CJ ONE의 브랜드를 선택해서 유형의 제품으로는 카드를 선택했다.

미드저니를 이용해 이미지 생성을 했을 때 브랜드 로고의 모양을 그대로 유지했을 때 원하는 톤앤매너가 나오지 않아서, GPT를 이용해서 이미지 생성 작업을 이어갔다.

CJ ONE logo centered inside a dark rounded square app-icon badge, playful retro pop vector illustration, bold black outlines, vivid CJ ONE prism colors, hot pink, magenta, violet, cyan, blue, orange red and white, dark navy grid background, cream-free clean graphic space, floating geometric cubes, prism shards, paper airplanes, abstract ribbon squiggles, orbit lines, small sparkles and dots, asymmetric radial layout, dynamic brand collage, solid flat color shapes, subtle 3D paper-cut depth, slight extruded edges, soft shadows under floating objects, screen print grain texture, crisp vector edges, energetic and friendly lifestyle membership campaign artwork

미드저니를 이용해 뽑은 여러 개의 시안

채택한 뒤 GPT로 가공하고, 최종적으로 Figma로 편집한 시안

여러 개의 시안 중에 그래도 가장 로고의 모양이 잘 살아있는 친구를 figma로 2차 가공하였다.

제품 디자인 사진은 여러 목업이나 사진들을 찾아보고, 그 중에서 가장 참고하고 싶은 형태의 레이아웃을 바탕으로 먼저 figma에 짧게 밑그림을 그렸다.

왼쪽은 미드저니로 카드 1개의 제품 사진을 받아본 뒤 시안을 리터치한 사진이고, 오른쪽은 제품 사진이다.

a premium vertical product advertisement featuring three floating membership cards, using the composition and spatial rhythm of a stacked diagonal product layout, dark cinematic studio background with subtle spotlight and soft floor glow, one black card placed at the upper area tilted in perspective, one vivid magenta card placed below it in a large diagonal block-like position, one cyan blue card placed at the bottom in another diagonal stacked position, all three cards designed as glossy rounded plastic membership cards, each card featuring a centered colorful geometric ring emblem, minimal white sans serif logo text, small membership text, clean card number area, sleek Korean lifestyle membership card aesthetic, dynamic zigzag vertical arrangement, floating in space, premium commercial key visual, refined reflections, elegant shadow, crisp edges, high-end 3D product render, minimal and sophisticated, strong contrast, visually striking, sharp focus, realistic material, luxury advertising mood --ar 9:16 --v 6.1 --style raw --s 170

만들어본 두가지 시안 CJ ONE의 로고에서 크리스털라이즈가 된 디자인 시각포인트를 주면 좋을 것 같아 임의로 추가해보았다.

마지막으로 카드 뉴스까지 만들어보았다.

시간이 없어 기획이나 브랜드 리서치가 조금 부족했지만 최선을 다해보았다.

미드저니 사용 후기

일정한 디자인을 유지한 채로 이미지를 생성하는 데에 어려움을 느끼는 것 같다. 캐릭터 디자인보다, 특히나 글씨 정보를 유지하는 것이 어렵다고 느껴졌다. 예를 들면 아래와 같이, 카드 이미지를 충분히 넣었음에도 아트 스타일을 반영하기 위해 다른 디테일들이 달라지는 모습을 볼 수 있었다.

두번째로, 미드저니가 용어를 기반으로 사용자의 의도를 추론 하는 모델을 사용한다는 것을 체감하였다.

GPT의 경우, 명령문과 함께 이미지를 제시할 경우 명령어를 '수행'하였지만

미드저니의 경우, 명령문과 함꼐 이미지를 제시할 경우 그 명령문을 '이미지화'한다.

미드저니로 사용

공부

Figma 챕터를 마무리하며 (~Day21 까지)

1. 새롭게 알게 된 점

2. 막히거나 어려웠던 부분

3. 이번 과정을 마치며

컴포넌트와 프로퍼티, 인스턴스 스왑

15~16일차

메인 컴포넌트와 인스턴스

프로퍼티 (=속성, 성격)

텍스트, 불리언 프로퍼티

인스턴스 스왑

디자인 요소, 디자인 시스템 Case Study

14일차 : 디자인 Foundation, Variables

디자인 파운데이션Design Foundation

디자인 시스템Design System

15일차(1) : 디자인 시스템

디자인 시스템Design System

|| 디자인 시스템의 간략한 케이스 스터디 : Gmarket / Line / Toss

Figma로 반응형 디자인 만들기 - Constraints, Auto Layout

Auto Layout 사용해서 반응형 디자인 실습해보기

Figma Constraints

반응형과 적응형 레이아웃

+) 디자이너, 개발자 협업 프로세스

더블다이아몬드에 기반한 UX 이론과, Figma 사용 기초

11일차

더블 다이아몬드 프로세스

I.A. & 화면 설계서

User Flow

12일차 -- 오토레이아웃

UI 화면 요소 종류와 이름

탐색 & 이동 UI

입력 & 선택 UI

콘텐츠 & 정보 표시 UI

상태, 피드백 & 오버레이 UI

패턴 & 심화 UI

디자인 기초 수업을 마무리하며 _ Class Review

게슈탈트의 이론

AI로 그래픽 만들기 _ Class Review

도입 -- 오즈코딩스쿨의 프로덕트 디자이너 부트캠프 과정 6일차 수강 후기

#1 AI로 SNS 콘텐츠 분석하기

#2 2026 Graphic Design Trends

트렌드 파악에 도움이 되는 사이트

#3 미드저니로 영상 만들기

#실습1 __ AI 캐릭터와 영상 만들기

#실습2 __ 그래픽 디자인 트렌드를 반영한 영상만들기

#추가학습 및 느낀점 __ 오늘 배운 내용을 반영해 AI agent 생성하기

AI 활용 기획 (3) - 디자인 실무 _ Class Review

1. 클라이언트의 말 해석하기

2. GPTs 사용해서 업무 특화 에이전트 만들기

3. 콘텐츠 기획을 위한 AI를 이용하기 + 실습!

미드저니 사용 후기

디자인 파운데이션
Design Foundation

디자인 시스템
Design System

디자인 시스템
Design System