레이블이 Figma인 게시물을 표시합니다. 모든 게시물 표시

2026년 5월 2일 토요일

다크모드 디자인 완전 가이드 — 어둠 속에서 빛나는 UI의 비밀

밤 11시, 침대에 누워 스마트폰을 꺼내는 순간 눈을 찌르는 하얀 화면. 반사적으로 손이 움직여 다크모드를 켠다. 이제 이 행동은 너무나 익숙해서 의식조차 하지 못한다. 그런데 여기서 한 가지 질문을 던져 보자. 당신이 지금 디자인하는 그 화면, 다크모드에서도 제대로 빛나고 있는가?

많은 디자이너가 다크모드를 "나중에 처리할 옵션"으로 미룬다. 혹은 라이트모드 색상을 단순히 반전시켜 놓고 완료했다고 착각한다. 하지만 2026년 현재, 다크모드는 선택 사항이 아닌 사용자 경험의 기본값으로 자리 잡고 있다. 이 글은 색상 이론부터 접근성, 브랜딩까지 — 다크모드 UI를 과학적으로 설계하는 완전한 방법론을 담는다.

1. 다크모드가 뜨는 이유 — 트렌드를 넘어 표준으로

다크모드 열풍의 배경에는 기술적 토대가 있다. OLED(유기발광다이오드) 디스플레이는 검정 픽셀을 완전히 꺼버리는 방식으로 작동하기 때문에, 다크모드 사용 시 배터리 소비를 크게 줄일 수 있다는 점이 널리 알려져 있다. 특히 스마트폰 화면의 상당 부분이 OLED 방식으로 전환된 현재, 이 절감 효과는 사용자 만족도에 직접적인 영향을 준다.

소비자 인식 측면에서도 변화가 뚜렷하다. 글로벌 사용자 중 절반 이상이 다크모드를 기본값으로 설정해 사용한다는 조사 결과가 여럿 발표된 것으로 알려져 있으며, 특히 20~30대 디지털 헤비 유저 사이에서 선호도가 높은 것으로 보고되고 있다. iOS·Android·Windows·macOS 모두 시스템 레벨에서 다크모드를 지원하고, 운영체제의 설정값을 CSS prefers-color-scheme 미디어 쿼리로 감지해 자동 전환하는 웹 표준도 이미 안착한 상태다.

피로감 측면에서도 다크모드는 저조도 환경에서 눈이 받는 광량 자체를 줄여 주어, 장시간 사용 시 불편함을 낮춰 준다는 연구 결과가 다수 보고된 것으로 알려져 있다. 다만 밝은 낮 환경에서는 오히려 가독성이 떨어질 수 있다는 반론도 존재하므로, 라이트·다크 두 모드를 모두 정교하게 설계하는 것이 최선의 전략이다.

2. 색상의 과학 — 다크모드는 '#000000'이 아니다

가장 흔한 오해는 "배경을 검게 만들면 다크모드"라는 생각이다. 순수 검정(Pure Black, #000000)을 배경으로 쓰면 오히려 할레이션(Halation) 현상이 발생한다. 할레이션이란 극단적인 명도 차이로 인해 텍스트 주변이 번져 보이는 시각적 왜곡이다. OLED 화면일수록 이 현상이 두드러진다.

구글의 Material Design 3는 다크 테마 배경색으로 #121212 수준의 매우 어두운 회색(Dark Gray)을 권장한다. 애플의 Human Interface Guidelines(HIG) 역시 시스템 배경색을 RGB 값 기준으로 완전한 검정이 아닌 짙은 회색 계열로 정의하고 있다. 이 가이드라인들이 공통으로 강조하는 개념이 바로 표면 계층(Surface Layer)이다.

표면 계층이란 배경→카드→모달→팝업으로 올라갈수록 배경색을 단계적으로 밝게 처리해 깊이감(Depth)을 주는 방식이다. 예를 들어 배경이 #121212라면, 카드 컴포넌트는 #1E1E1E, 바텀 시트는 #242424식으로 명도를 조금씩 높여 간다. HSB(Hue-Saturation-Brightness) 또는 HSL(Hue-Saturation-Lightness) 색공간으로 작업하면 이 단계를 직관적으로 컨트롤할 수 있다.

색조(Hue) 측면에서도 고려할 점이 있다. 순수 중립 회색보다 브랜드 컬러에서 추출한 색조를 살짝 섞은 어두운 배경이 더 세련된 인상을 준다. 예컨대 파란 계열 브랜드라면 배경에 아주 옅은 파란 기운을 띄워 색상 정체성을 유지할 수 있다.

3. 대비와 접근성 — WCAG가 말하는 '보이는 디자인'

아름다운 다크 팔레트도 사용자가 읽을 수 없다면 무의미하다. WCAG(Web Content Accessibility Guidelines) 2.2는 텍스트와 배경 간의 명도 대비 비율 기준을 정의하고 있다. AA 등급은 일반 텍스트 기준 약 4.5:1 이상, AAA 등급은 약 7:1 이상의 대비 비율을 요구한다고 알려져 있다. 큰 텍스트(Large Text)는 이보다 완화된 기준이 적용된다.

다크모드에서 가장 흔하게 저지르는 실수는 회색 위의 회색 조합이다. 배경이 #1E1E1E인데 보조 텍스트를 #757575 정도로 설정하면 대비가 부족해 가독성이 크게 떨어진다. 반드시 대비 확인 도구를 통해 검증해야 한다.

대비 체크 도구로는 다음이 자주 활용된다.

Figma 플러그인 — 'Contrast' 또는 'A11y - Color Contrast Checker'와 같은 플러그인이 널리 쓰이는 것으로 알려져 있다. Figma 무료로 시작하기
WebAIM Contrast Checker — 웹 기반으로 HEX 코드를 입력해 즉시 대비 비율을 확인할 수 있다.
Adobe Color — 팔레트 전체의 접근성을 일괄 점검할 수 있어 시스템 설계 단계에서 유용하다.

색맹(Color Blindness) 사용자를 위한 포용적 설계(Inclusive Design)도 빠뜨릴 수 없다. 색상만으로 상태를 구분하지 않고, 아이콘·패턴·레이블을 함께 사용하는 원칙은 다크모드에서 더욱 중요해진다. 배경이 어두울수록 미묘한 색상 차이가 더 잘 뭉개지기 때문이다.

4. 타이포그래피와 아이콘 — 빛나되 눈부시지 않게

텍스트를 #FFFFFF(순수 흰색)으로 설정하면 강하게 튀어 보여 오히려 가독성을 해친다. 이는 앞서 설명한 할레이션과도 연결된다. Material Design 3는 다크 테마에서 주요 텍스트의 불투명도(Opacity)를 약 87% 수준으로 낮추는 것을 권장한다고 알려져 있으며, 보조 텍스트는 약 60%, 비활성 요소는 약 38% 수준의 흰색 투명도를 사용하는 것이 일반적이다.

실무에서는 투명도 대신 실제 색상 값으로 고정해 두는 편이 렌더링 일관성을 높인다. 예를 들어 주요 텍스트를 rgba(255,255,255,0.87) 대신 #DEDEDE로 지정하는 방식이다.

아이콘 설계에서도 고려 사항이 있다. 라이트모드용 아이콘을 그대로 다크모드에 올리면 스트로크가 너무 굵어 보이거나 채도가 과하게 느껴질 수 있다. 다크 테마용 아이콘은 스트로크를 0.5~1px 가늘게 조정하고 채도를 약간 낮춰 배경과 자연스럽게 어우러지도록 튜닝하는 것이 좋다.

브랜드 로고의 경우 어댑티브 로고(Adaptive Logo) 버전을 별도로 준비하는 것이 권장된다. 검정 배경 위의 검정 로고처럼 명백한 실수는 쉽게 발견되지만, 채도·명도가 미묘하게 어긋나 브랜드 인상이 흐려지는 경우는 놓치기 쉽다.

5. 컴포넌트 설계 — 다크 테마 시스템을 Figma로 구축하기

개별 화면을 다크 버전으로 만드는 것과, 시스템(System)으로 다크모드를 구축하는 것은 차원이 다른 작업이다. 후자를 위해서는 디자인 토큰(Design Token) 기반의 색상 시스템이 필수적이다.

디자인 토큰이란 색상·타이포그래피·간격 등의 값을 변수(Variable)로 추상화해 플랫폼과 모드에 관계없이 일관되게 적용하는 방법론이다. Figma는 2024년 이후 Figma Variables 기능을 통해 Light/Dark 컬렉션을 설정하고, 컴포넌트에 연결된 변수만 전환하면 전체 UI가 자동으로 모드 전환되는 구조를 지원하고 있다. Figma Professional 플랜 알아보기

다크모드에서 그림자(Shadow) 처리도 재고가 필요하다. 라이트모드에서는 box-shadow로 요소의 부각(Elevation)을 표현하지만, 어두운 배경에서 어두운 그림자는 거의 보이지 않는다. 대신 표면 색상을 단계적으로 밝게 올리는 방식(Surface Tint)으로 깊이를 표현하는 것이 현재의 주류 접근법이다.

실전 QA 체크리스트로는 다음 항목을 참고할 수 있다.

모든 텍스트의 대비 비율이 WCAG AA 기준을 충족하는가?
이미지·아이콘이 다크 배경에서 과도하게 튀거나 묻히지 않는가?
포커스 링(Focus Ring)이 다크 배경에서도 명확히 보이는가?
에러·성공·경고 상태 색상이 다크모드에서도 구별 가능한가?
다크모드 전환 시 애니메이션이 자연스럽게 처리되는가?

6. 브랜드와 감성 — 다크모드가 만드는 프리미엄 경험

기능성을 넘어 다크모드는 강력한 브랜딩 도구이기도 하다. 애플, 테슬라, 스포티파이, Figma 등 프리미엄 포지셔닝을 추구하는 브랜드들이 다크 인터페이스를 적극 채택한 데는 이유가 있다. 어두운 배경은 콘텐츠를 극적으로 부각시키고, 사용자의 집중력을 높이며, 고급감(Premium)·신뢰(Trust)·집중(Focus)이라는 심리적 코드를 자연스럽게 전달한다.

스타트업 창업자와 마케터라면 이 점에 주목할 필요가 있다. 예산이 제한된 상황에서도 정교하게 설계된 다크 UI 하나가 브랜드의 위상을 한 단계 올려줄 수 있다. 다크모드를 기본값으로 설정하거나, 온보딩 화면·랜딩 페이지의 히어로 섹션에 다크 테마를 적용하는 것만으로도 사용자에게 강한 첫인상을 남길 수 있다.

물론 모든 브랜드에 다크모드가 맞는 것은 아니다. 어린이 교육, 의료, 식음료처럼 밝고 친근한 이미지가 핵심인 브랜드는 라이트모드가 더 적합할 수 있다. 다크모드를 전략적으로 선택하는 것, 즉 브랜드의 가치와 사용자의 맥락을 깊이 이해한 뒤 결정하는 것이 진정한 전문가의 접근이다.

마치며 — 어둠을 설계하는 것은 빛을 설계하는 일이다

다크모드 디자인의 본질은 단순한 색상 반전이 아니다. 빛의 물리학, 인지 심리학, 접근성 원칙, 브랜드 전략이 교차하는 복합적 설계 행위다. #000000 배경 하나에 흰 글씨를 올려놓는 것이 아니라, 표면의 계층을 쌓고, 대비를 계산하고, 감성을 정교하게 빚어내는 과정이다.

오늘 당장 Figma를 열어 Variables 패널에 color/background/primary와 같은 토큰을 정의하는 것부터 시작해 보자. 그 작은 한 걸음이, 어둠 속에서 빛나는 UI를 향한 첫 번째 선택이 될 것이다.

다크모드는 사용자 경험과 브랜드 신뢰를 동시에 설계하는 전략적 선택이다.

📚 관련 추천 도구 및 강의

📚 이 글과 함께 읽으면 좋은 추천 도서

디자인 구구단 보러가기 →

※ 파트너스 활동을 통해 일정액의 수수료를 받을 수 있습니다.

2026년 4월 28일 화요일

피그마 말고 이것도 있다 - 2026년 디자이너가 주목해야 할 협업 디자인 툴 완전 비교

디자인을 배워야겠다고 마음먹은 순간, 수많은 툴의 이름이 머릿속을 어지럽힌다. Sketch, Adobe XD, 그리고 피그마(Figma). "일단 피그마부터 써야 한다"는 말은 어디서나 들리는데, 정작 어떤 기능부터 익혀야 하는지, 내 작업 방식에 맞게 세팅하는 법은 무엇인지 알려주는 곳은 드물다. 이 글은 그 막막함을 해소하기 위해 쓰였다. 2026년 현재 UI/UX 업계의 사실상 표준 툴(de facto standard)로 자리 잡은 피그마를 핵심 기능부터 실무 워크플로우, 요금제, 학습 로드맵까지 단계별로 해부한다.

1. 피그마란 무엇인가 — 브라우저 기반 협업 디자인 툴

피그마는 2016년 딜런 필드(Dylan Field)와 에반 윌리스(Evan Wallace)가 공동 창업한 클라우드 기반 디자인 툴이다. 가장 큰 특징은 별도 설치 없이 웹 브라우저에서 실행된다는 점이다. 덕분에 macOS, Windows, 심지어 Linux 환경에서도 동일한 경험을 제공한다.

2022년 어도비(Adobe)가 약 200억 달러에 인수를 시도했으나 미국·유럽 규제 당국의 반독점 심사를 통과하지 못해 무산된 것으로 알려져 있다. 이 사건은 오히려 피그마의 독립성과 브랜드 신뢰도를 높이는 계기가 됐다는 평가가 많다. 이후 피그마는 독자적인 노선을 걸으며 AI 기능과 개발자 협업 도구를 빠르게 강화해 왔다.

Sketch가 macOS 전용이라는 플랫폼 한계를 갖고, Adobe XD가 사실상 개발 중단 상태에 놓인 것으로 알려진 2026년 현재, 피그마는 실질적으로 경쟁자 없는 UI 디자인 툴의 지위를 누리고 있다. 전 세계 디자이너의 상당수가 피그마를 주력 툴로 사용하고 있는 것으로 알려져 있으며, 구인 공고에서도 피그마 활용 능력이 기본 자격 요건으로 명시되는 경우가 크게 늘었다.

2. 2026년 피그마의 핵심 변화 — AI와 Dev Mode의 진화

2025~2026년을 거치며 피그마는 단순한 디자인 툴을 넘어 AI 기반 디자인 파트너로 진화했다는 평가를 받는다.

Figma AI는 현재 다음과 같은 기능을 제공하는 것으로 알려져 있다.

자동 레이아웃 제안: 컴포넌트를 배치하면 AI가 최적의 Auto Layout 구조를 추천한다.
콘텐츠 자동 생성: 더미 텍스트나 이미지 플레이스홀더를 실제 맥락에 맞는 콘텐츠로 자동 채운다.
디자인 비평(Design Critique): AI가 접근성(Accessibility), 일관성, 여백 균형 등을 분석해 개선 의견을 제시한다.

Dev Mode 2.0은 디자이너와 개발자 사이의 핸드오프(Handoff) 과정을 혁신한 기능으로 주목받는다. 디자인 파일에서 CSS, Swift, Kotlin 코드를 자동으로 추출할 수 있으며, 변경 사항 비교(Diff) 기능을 통해 개발자가 업데이트된 디자인을 즉시 파악할 수 있다. 개발·디자인 팀 간 커뮤니케이션 비용을 크게 줄여 준다는 현장 사용자들의 평가가 많다.

또한 Figma Slides는 피그마 캔버스 안에서 프레젠테이션을 제작하는 기능으로, 디자이너가 별도의 PowerPoint나 Keynote 없이 작업 결과물을 발표할 수 있도록 돕는다. FigJam은 온라인 화이트보드 툴로, 브레인스토밍과 사용자 여정 지도(User Journey Map) 작성에 널리 활용되는 것으로 알려져 있다.

3. 피그마 핵심 기능 완전 해부 — 실무 필수 기능 TOP 5

피그마의 기능은 방대하지만, 실무에서 반복적으로 사용되는 핵심 기능은 다음 다섯 가지로 압축할 수 있다.

① Auto Layout (자동 레이아웃)

버튼, 카드, 리스트 등의 UI 컴포넌트가 내용의 변화에 따라 자동으로 크기와 간격을 조정하는 기능이다. CSS의 Flexbox 개념과 유사하며, 반응형 디자인(Responsive Design)의 기본 토대가 된다. Auto Layout을 제대로 익히는 것이 피그마 실력의 분수령이라는 말이 현업에서 자주 들린다.

② Component & Variant (컴포넌트·베리언트)

반복 사용되는 UI 요소를 컴포넌트로 만들면, 하나를 수정할 때 전체 화면에 일괄 적용된다. 베리언트(Variant)는 버튼의 Default/Hover/Disabled 상태처럼 하나의 컴포넌트가 가진 다양한 변형을 하나의 세트로 묶어 관리하는 기능이다. 디자인 시스템(Design System) 구축의 핵심 단위다.

③ Prototype (프로토타입)

화면과 화면 사이를 연결해 클릭 가능한 목업(Mock-up)을 제작한다. 애니메이션 트리거와 전환 효과를 설정해 실제 앱처럼 시연할 수 있어 클라이언트 발표나 사용자 테스트에 유용하다.

④ Styles & Variables (스타일·변수)

색상, 텍스트, 효과를 스타일(Style)로 저장해 전체 디자인에 일관성을 부여한다. 2023년 이후 도입된 Variables(변수) 기능은 라이트/다크 모드 전환이나 다국어 대응처럼 복잡한 디자인 로직을 처리하는 데 강력한 도구로 자리 잡은 것으로 알려져 있다.

⑤ Plugin (플러그인) 생태계

피그마 커뮤니티에는 수천 개의 플러그인이 등록되어 있는 것으로 알려져 있다. 실무에서 특히 유용한 플러그인으로는 Unsplash(무료 이미지 삽입), Iconify(아이콘 라이브러리), Stark(접근성 색상 대비 검사), Tokens Studio(디자인 토큰 관리) 등이 자주 언급된다.

4. 실무 워크플로우 — 기획부터 개발 전달까지 피그마 하나로

많은 팀이 피그마를 단순한 디자인 툴이 아닌, 프로젝트 전 과정을 관리하는 협업 허브로 활용하고 있다. 일반적인 실무 흐름은 다음과 같다.

와이어프레임(Wireframe): FigJam 또는 피그마 캔버스에서 정보 구조와 레이아웃 초안을 잡는다.
UI 디자인: 컴포넌트와 Auto Layout을 적용해 고해상도 화면을 제작한다.
프로토타입: 인터랙션을 연결해 사용자 테스트용 목업을 완성한다.
개발 핸드오프: Dev Mode를 활성화해 개발자가 직접 코드 스펙과 에셋(Asset)을 추출한다.

이 흐름에서 팀 라이브러리(Team Library)는 특히 중요한 역할을 한다. 디자인 시스템을 팀 라이브러리로 공유하면, 모든 팀원이 동일한 컴포넌트와 스타일을 실시간으로 사용할 수 있어 브랜드 일관성을 유지하기가 훨씬 쉬워진다.

1인 스타트업이나 프리랜서라면 피그마 커뮤니티(Figma Community)에서 무료로 공개된 디자인 시스템 템플릿(예: Material Design 3, Apple HIG 기반 UI 킷)을 내려받아 시간을 절약하는 전략이 효과적인 것으로 알려져 있다.

5. 피그마 요금제 해설 — 무료로도 충분한가

2026년 현재 피그마는 크게 네 가지 요금제를 운영하고 있는 것으로 알려져 있다.

플랜	대상	주요 제한
Starter (무료)	개인, 소규모 팀	드래프트 파일 수 제한, 버전 히스토리 30일
Professional	프리랜서, 소규모 팀	무제한 프로젝트, 팀 라이브러리 활용 가능
Organization	중견 기업	중앙화된 디자인 시스템 관리, SSO 지원
Enterprise	대기업	고급 보안·관리 기능, 전담 지원

입문자나 학생이라면 Starter 플랜으로도 핵심 기능 학습에 충분하다는 것이 대체적인 평가다. 다만 팀 협업이나 버전 관리가 중요한 실무 환경이라면 Professional 플랜 이상을 검토하는 것이 권장된다. 인증된 학생 및 교육 기관에는 별도 할인 혜택이 제공되는 것으로 알려져 있으므로, 피그마 공식 교육 프로그램 페이지를 확인해 볼 것을 권한다.

6. 피그마 마스터를 위한 단계별 학습 로드맵

피그마는 배울수록 깊어지는 툴이다. 수준별 학습 경로를 정리하면 다음과 같다.

입문 단계 (1~4주)
- 피그마 공식 유튜브 채널과 Figma Community의 무료 튜토리얼로 기본 인터페이스와 핵심 기능을 익힌다.
- 간단한 앱 화면 3~5개를 직접 클론(Clone) 디자인해 본다.

중급 단계 (1~3개월)
- Auto Layout과 Component/Variant를 활용해 나만의 간단한 디자인 시스템을 구축해 본다.
- Udemy, Coursera 등 플랫폼의 피그마 심화 강의(유료)를 수강하면 학습 속도가 빨라지는 것으로 알려져 있다.
- Figma Community에 본인 작업물을 공개하고 피드백을 받는 것이 성장에 도움이 된다.

고급 단계 (3개월 이후)
- Figma API를 활용해 디자인 데이터를 자동화하거나, 직접 플러그인을 개발한다.
- 디자인 토큰(Design Token) 개념을 이해하고 개발 팀과의 협업 워크플로우를 최적화한다.
- Tokens Studio, Style Dictionary 등의 툴과 연계해 코드와 디자인의 단일 소스(Single Source of Truth)를 구현하는 것이 최신 트렌드로 알려져 있다.

추천 커뮤니티로는 Figma 공식 포럼, Reddit r/FigmaDesign, 그리고 국내에서는 FDSC(Figma Design Seoul Community) 등이 활발하게 운영되는 것으로 알려져 있다.

결론 — 피그마는 철학이다

피그마를 잘 쓴다는 것은 단축키를 외우거나 기능을 나열하는 것이 아니다. "디자인은 혼자 완성되지 않는다"는 협업 철학을 이해하고, 팀원·개발자·이해관계자 모두가 같은 파일 안에서 같은 언어로 소통하는 환경을 만드는 것이다. 그 철학 위에서 Auto Layout도, 디자인 시스템도, Dev Mode도 비로소 진정한 힘을 발휘한다.

지금 당장 할 수 있는 첫 번째 액션은 간단하다. 피그마 계정을 만들고, 좋아하는 앱 화면 하나를 클론해 보는 것이다. 그 첫 번째 프레임을 캔버스에 올리는 순간, 당신의 피그마 여정이 시작된다.

📚 관련 추천 강의 및 리소스

📚 이 글과 함께 읽으면 좋은 추천 도서

디자인 구구단 보러가기 →

※ 파트너스 활동을 통해 일정액의 수수료를 받을 수 있습니다.

2026년 4월 22일 수요일

포트폴리오 만들기 완전 가이드 — 디자이너 취업의 핵심

디자인 스킬은 충분하다고 생각하는데, 서류 전형에서 계속 탈락한다면? 혹은 포트폴리오를 만들려고 빈 Notion 페이지를 열었다가 어디서부터 시작해야 할지 몰라 창을 닫아 버린 경험이 있다면, 이 글은 당신을 위한 것이다. 포트폴리오는 단순한 작품집이 아니다. 채용 담당자에게 보내는 첫 번째 면접이자, 당신의 사고방식을 보여 주는 설계 문서다. 이 글에서는 프로젝트 선정 기준부터 케이스 스터디 작성법, 2026년 AI 협업 트렌드까지, 취업 경쟁력을 높이는 포트폴리오 전략을 단계별로 안내한다.

1. 포트폴리오, 왜 '결과물 모음집'이 아닌가

많은 디자인 학도가 포트폴리오를 만들 때 가장 먼저 하는 실수가 있다. 완성도 높은 시안을 최대한 많이 나열하는 것이다. 하지만 채용 담당자가 실제로 포트폴리오에서 확인하고 싶은 것은 "이 사람은 문제를 어떻게 정의하고, 어떤 근거로 이 디자인 결론에 도달했는가?" 이다.

업계에서 약 10년 이상 경력의 디자인 리드들 사이에서는 "예쁜 포트폴리오보다 논리적인 포트폴리오가 합격률이 높다"는 인식이 공유되고 있는 것으로 알려져 있다. 실제로 채용 프로세스에 참여한 시니어 디자이너들의 인터뷰를 보면, 화려한 비주얼보다 리서치 방법론, 의사결정 근거, 실패 경험에서의 학습을 포함한 포트폴리오에 더 높은 점수를 주는 경향이 있다고 알려져 있다.

결론적으로, 포트폴리오의 목적은 '내가 이런 것들을 만들었다'가 아니라 '나는 이런 방식으로 문제를 푼다'를 증명하는 것이다. 이 관점의 전환이 포트폴리오 전략의 출발점이다.

2. 어떤 프로젝트를 담을 것인가 — 선정 기준

포트폴리오에 프로젝트를 담을 때 가장 흔한 질문은 "몇 개나 넣어야 하나요?"이다. 업계 관행상 약 3~5개의 프로젝트가 적정 수준으로 알려져 있다. 너무 많으면 초점이 흐려지고, 너무 적으면 역량의 범위를 보여 주기 어렵다.

선정 기준 3가지

① 지원 직군과의 연관성
UX 디자이너로 지원한다면 사용자 리서치와 정보 구조 설계가 잘 드러나는 프로젝트를 우선순위에 두어야 한다. 브랜드 디자이너라면 시각 언어의 일관성과 아이덴티티 구축 과정이 보이는 작업을 앞세워야 한다.

② 문제 해결 스토리의 완결성
시작과 끝이 분명한 프로젝트, 즉 문제가 정의되고 솔루션이 도출된 프로세스가 명확한 작업을 선택한다. 미완성 프로젝트는 그 이유와 배운 점을 함께 서술할 때만 포함을 고려한다.

③ 실무 프로젝트가 없을 때의 대안
실무 경험이 부족하다면 리디자인(Redesign) 프로젝트, 공개 공모전, 해커톤 결과물, 또는 직접 기획한 사이드 프로젝트가 훌륭한 대안이 된다. 가상의 클라이언트를 설정하고 실제 프로젝트처럼 프로세스를 설계하는 방식은, 주니어 채용 시장에서 점점 긍정적으로 평가받는 추세로 알려져 있다.

3. 케이스 스터디(Case Study) 작성의 기술

포트폴리오의 핵심은 케이스 스터디다. 단순히 완성된 화면을 캡처해서 붙여 넣는 것과 케이스 스터디를 작성하는 것은 완전히 다른 차원의 작업이다.

기본 구조: 5단계 프레임워크

단계	내용	작성 포인트
Problem	문제 정의	어떤 사용자가, 어떤 상황에서, 어떤 불편을 겪었는가
Research	리서치	어떤 방법론을 사용했는가 (인터뷰, 설문, 경쟁사 분석 등)
Ideation	아이디어 발산	어떤 옵션들을 검토했고, 왜 특정 방향을 선택했는가
Solution	최종 디자인	주요 화면/결과물과 디자인 결정의 근거
Result	성과 및 회고	정량적·정성적 임팩트, 배운 점, 아쉬운 점

수치와 임팩트를 표현하는 법

수치를 제시할 수 있다면 반드시 포함한다. "리디자인 후 사용자 태스크 완료 시간이 단축되었다"는 문장보다 "A/B 테스트 결과, 리디자인 버전에서 태스크 완료 시간이 약 30% 단축된 것으로 측정되었다"가 훨씬 강력하다. 실제 수치가 없는 경우에는 유사 사례를 참고하되, "업계 유사 사례에서 약 ~% 향상이 보고된 것으로 알려져 있다" 와 같이 명확히 출처를 한정해서 서술하는 것이 신뢰도를 지킨다.

비주얼과 텍스트의 비율은 약 6:4를 기준으로 잡는 것이 읽기 편한 케이스 스터디를 만드는 데 유리한 것으로 알려져 있다. 이미지만 가득한 케이스 스터디는 과정의 맥락이 사라지고, 텍스트만 많으면 지루해진다.

4. 플랫폼과 도구 선택 — 나에게 맞는 채널은

포트폴리오를 '어디에' 올리느냐도 전략이다. 2026년 현재 디자이너들이 주로 활용하는 플랫폼은 다음과 같다.

주요 플랫폼 비교

Behance
Adobe 생태계와 연동되며 글로벌 노출에 유리하다. 특히 브랜딩·모션·일러스트레이션 직군에서 채용 담당자들이 자주 탐색하는 채널로 알려져 있다. Adobe CC 구독 사용자라면 와 연동해 별도 도메인의 개인 사이트를 빠르게 구축할 수 있다.

Notion
UX 디자이너와 프로덕트 디자이너 사이에서 케이스 스터디 중심의 포트폴리오 포맷으로 빠르게 확산되고 있다. 텍스트·이미지·영상·프로토타입 링크를 자유롭게 배치할 수 있어 프로세스 중심 서술에 적합하다.

Framer / Webflow
코드 없이 인터랙션이 풍부한 포트폴리오 사이트를 구축할 수 있다. 특히 모션 디자이너나 인터랙션 디자이너에게 자신의 기술력을 직접 증명하는 매체로 활용된다.

Figma 기반 PDF
로 제작한 포트폴리오를 고해상도 PDF로 내보내 이메일 지원 시 첨부하는 방식은 여전히 많은 기업에서 요청하는 형식이다. Figma의 프로토타입 링크 공유 기능을 함께 활용하면 온·오프라인 모두를 커버할 수 있다.

직군별 추천 매핑

직군	추천 플랫폼
UX/UI 디자이너	Notion, Figma 링크 + 개인 사이트
브랜드 디자이너	Behance, Adobe Portfolio
모션 디자이너	Behance, Vimeo, Framer
스타트업 / 제너럴리스트	Notion, Framer

5. 2026년 트렌드: AI 협업 과정을 포트폴리오에 담는 법

2026년 현재, 디자인 업계에서 AI 도구의 활용은 선택이 아닌 기본 역량으로 인식되는 방향으로 빠르게 이동하고 있는 것으로 알려져 있다. Midjourney, Adobe Firefly, ChatGPT 등의 AI 도구를 활용한 프로세스를 포트폴리오에 투명하게 공개하는 디자이너들이 오히려 더 긍정적인 평가를 받는 사례가 늘고 있다.

AI 협업 포트폴리오 작성 시 핵심 원칙

① 도구가 아닌 판단력을 보여 준다
"Midjourney로 무드보드를 생성했다"는 서술로 끝나면 안 된다. 왜 그 이미지를 선택했는지, 어떻게 편집하고 방향을 수정했는지, 즉 디자이너로서의 큐레이션과 미적 판단을 서술해야 한다.

② 프롬프트 엔지니어링 과정을 시각화한다
초기 프롬프트와 결과물, 수정 과정, 최종 선택까지의 흐름을 스크린샷과 함께 정리하면 AI를 단순히 사용한 것이 아니라 의도적으로 제어한 역량을 증명할 수 있다.

③ AI 결과물의 저작권·윤리 이슈를 인지하고 있음을 명시한다
AI 생성 이미지의 상업적 활용 범위, 데이터 학습 출처에 대한 윤리적 고려를 포트폴리오 내에 짧게라도 언급하는 것이 2026년 기준으로 신뢰도를 높이는 요소로 알려져 있다.

📌 AI 도구 활용 능력을 체계적으로 학습하고 싶다면, 국내외 디자인 강의 플랫폼에서 'AI + UX 디자인' 과정을 검토해 보자.

6. 공개 전 최종 체크리스트

포트폴리오를 완성한 후에도 반드시 아래 항목을 점검해야 한다. 좋은 내용이 담겨 있어도 기술적 문제나 연락처 누락으로 기회를 잃는 경우가 의외로 많은 것으로 알려져 있다.

✅ 기술 점검

[ ] 모바일 환경에서 레이아웃이 깨지지 않는가?
[ ] 페이지 로딩 속도가 약 3초 이내인가? (이 기준을 초과하면 이탈률이 급증하는 것으로 알려져 있다)
[ ] 모든 외부 링크(Figma 프로토타입, GitHub 등)가 정상 작동하는가?
[ ] 이미지 해상도가 화면 크기에 맞게 최적화되어 있는가?

✅ 콘텐츠 점검

[ ] 각 프로젝트마다 역할(Role)이 명확히 기재되어 있는가?
[ ] 팀 프로젝트의 경우 개인 기여 범위가 구체적으로 서술되어 있는가?
[ ] 이메일, LinkedIn, 기타 연락 채널이 눈에 띄는 위치에 있는가?
[ ] 이력서(Resume/CV)와 포트폴리오의 정보가 일치하는가?

✅ 피어 리뷰(Peer Review)

완성된 포트폴리오를 공개하기 전, 동료 디자이너나 현업 멘토에게 피드백을 요청하는 과정을 반드시 거치길 권장한다. 자신이 당연하다고 생각하는 맥락이 외부인에게는 불분명하게 전달되는 경우가 많기 때문이다. 디자인 커뮤니티(오픈 카카오톡, Discord 서버, ADPList 등)를 활용하면 무료로 피드백을 구할 수 있다.

마치며 — 포트폴리오는 완성이 아니라 진화다

포트폴리오를 '한 번 만들고 끝나는 문서'로 생각한다면 곧 경쟁에서 뒤처질 수 있다. 새로운 프로젝트를 마칠 때마다, 새로운 스킬을 익힐 때마다, 그리고 트렌드가 바뀔 때마다 포트폴리오는 함께 업데이트되어야 한다. 포트폴리오는 살아있는 문서다.

이 글에서 반복해서 강조한 핵심 메시지를 다시 한번 정리하면, 포트폴리오는 디자인 결과물의 전시가 아니라 당신의 사고 과정과 문제 해결 능력을 증명하는 서사다. 예쁜 시안보다 논리적인 케이스 스터디가, 많은 작업보다 완결성 있는 3~5개의 프로젝트가, 도구 나열보다 판단력의 증명이 채용 담당자의 마음을 움직인다.

오늘 당장 가장 자신 있는 프로젝트 하나를 꺼내어, 5단계 케이스 스터디 구조로 재구성해 보자. 그것이 당신의 포트폴리오 전략을 바꾸는 첫걸음이 될 것이다.

📚 관련 추천 도서 및 서비스
- — 포트폴리오 제작에 최적화된 협업 디자인 툴
- — Behance + Adobe Portfolio 통합 활용
- — 2026년 트렌드에 맞춘 포트폴리오 역량 강화

📚 이 글과 함께 읽으면 좋은 추천 도서

디자인 구구단 보러가기 →

※ 파트너스 활동을 통해 일정액의 수수료를 받을 수 있습니다.

2026년 4월 20일 월요일

디자인 시스템 만들기 완전 가이드 — Figma로 시작하는 컴포넌트 라이브러리 구축 실전

디자인 시스템 구축 입문 — Figma로 시작하는 컴포넌트 라이브러리

같은 서비스인데 버튼 색깔이 페이지마다 다르고, 인풋 필드 높이가 화면마다 제각각이라 QA팀에게 지적받은 경험이 있나요? 이 문제의 근본 원인은 대부분 하나입니다. 디자인의 기준이 없어서입니다. 디자인 시스템이 그 기준을 만들어줍니다.

1. 디자인 시스템이란 무엇인가 — 오해와 재정의

디자인 시스템 만들기라는 말을 들으면 구글 머티리얼 디자인이나 IBM 카본처럼 방대한 문서와 팀이 필요한 일처럼 느껴집니다. 하지만 디자인 시스템의 본질은 규모가 아닙니다. 일관성입니다.

디자인 시스템은 세 가지 요소의 집합입니다. 반복 사용하는 UI 조각인 컴포넌트, 색깔·타이포·간격을 정의하는 파운데이션, 그리고 이것을 어떻게 사용할지 설명하는 가이드라인입니다. 이 세 가지를 혼자 만들어도 디자인 시스템입니다. 혼자 쓰는 시스템도 시스템입니다.

2. 최소 구성 3단계 — 무엇부터 만들어야 하나

Foundation — 모든 것의 뿌리

Foundation은 Figma 디자인 시스템의 가장 아래에 깔리는 기초입니다. 여기서 정의하는 것은 네 가지입니다.

컬러 팔레트: Primary / Secondary / Neutral / Semantic(성공·경고·에러) 색상을 Figma Variables로 토큰화합니다. 나중에 다크 모드 전환이 필요할 때 Variables로 관리해두면 전체를 한 번에 교체할 수 있습니다.

타이포그래피 스케일: H1~H6, Body, Caption 등 텍스트 크기와 자간·행간을 정의합니다. 이 단계에서 폰트 종류와 굵기도 확정합니다.

스페이싱 시스템: 4px 또는 8px 베이스의 간격 토큰(4, 8, 12, 16, 24, 32…)을 만들어 마진·패딩에 일관되게 적용합니다.

그리드: 12컬럼 그리드와 최대 너비, 화면 크기별 브레이크포인트를 정의합니다.

Components — 반복 사용하는 UI 조각

처음부터 모든 것을 만들 필요가 없습니다. 컴포넌트 라이브러리의 첫 번째 목표는 4개로 충분합니다. Button, Input, Icon, Card. 이 4개가 있으면 대부분의 기본 화면을 구성할 수 있습니다.

각 컴포넌트는 Variants로 상태를 묶어 관리합니다. 버튼의 경우 Size(Small·Medium·Large) × Style(Primary·Secondary·Ghost) × State(Default·Hover·Disabled·Loading) 조합을 하나의 컴포넌트 안에서 처리합니다.

Patterns — 컴포넌트의 조합

패턴은 컴포넌트를 묶어서 만드는 더 큰 단위입니다. 로그인 폼, 검색 바, 헤더 네비게이션처럼 여러 페이지에 반복되는 UI 구조입니다. 처음에는 2~3개면 충분합니다.

3. Figma로 만드는 법 — 단계별 실전

디자인 시스템 만들기의 실전 과정을 Figma 기준으로 정리합니다.

Step 1. Variables 설정부터 시작하세요
Figma Variables는 컬러·숫자·텍스트 값을 토큰으로 저장해 전체 디자인에 연결하는 기능입니다. 컬러 변수를 만들 때는 color/primary/500처럼 계층 구조로 네이밍하면 나중에 관리가 편해집니다.

Step 2. Button 컴포넌트 하나로 기초를 익히세요
디자인 시스템의 첫 컴포넌트는 버튼이 적합합니다. 크기와 상태가 다양해 Variants 사용법을 익히기에 가장 좋은 대상입니다. Button 하나를 제대로 만들면 나머지 컴포넌트는 같은 방식을 반복합니다.

Step 3. Auto Layout을 반드시 적용하세요
Auto Layout 없는 컴포넌트는 텍스트 길이가 바뀔 때마다 수동으로 크기를 조정해야 합니다. 모든 컴포넌트에 Auto Layout을 적용하면 콘텐츠 양에 따라 컴포넌트가 자동으로 늘어나고 줄어듭니다.

Step 4. 팀 라이브러리로 퍼블리시하세요

4. 혼자 관리하는 법 — 스타트업 디자이너를 위한 팁

디자인 시스템 파일의 구조는 단순할수록 좋습니다. 페이지를 네 개로 나누는 방식이 널리 쓰이는 것으로 알려져 있습니다. Cover(소개·버전·날짜), Foundation(컬러·타이포·스페이싱), Components(컴포넌트 목록), Patterns(패턴 목록).

UI 가이드라인에서 가장 중요한 것은 네이밍 컨벤션입니다. 컴포넌트 이름은 Button/Size=Medium/Style=Primary/State=Default처럼 슬래시(/)로 계층을 구분하면 Figma에서 자동으로 그룹핑됩니다. 이 규칙을 처음부터 잡아두지 않으면 컴포넌트가 늘어날수록 찾기 어려워집니다.

5. 처음 만들 때 흔히 하는 실수 3가지

실수 1. 완벽하게 만들려다 시작을 못 한다
처음부터 구글 수준의 시스템을 목표로 잡으면 시작이 어렵습니다. 컬러 Variables 10개와 버튼 컴포넌트 1개로도 오늘 시작할 수 있습니다. 시스템은 쓰면서 키우는 것입니다.

실수 2. 네이밍 없이 컴포넌트를 쌓는다
이름 없이 컴포넌트를 만들면 100개가 넘는 순간 아무것도 찾을 수 없게 됩니다. 네이밍 규칙은 첫 컴포넌트를 만들기 전에 먼저 정해야 합니다.

실수 3. 너무 잘게 쪼갠다
버튼 안의 아이콘까지 별도 컴포넌트로 만들다 보면 구조가 지나치게 복잡해집니다. 처음에는 재사용 빈도가 높은 것만 컴포넌트로 만들고, 나머지는 일반 레이어로 두는 것이 현실적입니다.

6. 지금 당장 시작할 수 있다

오늘 Figma 파일을 열고 컬러 Variables 10개와 버튼 컴포넌트 하나만 만들어 보세요. 그게 당신의 디자인 시스템 첫 번째 버전입니다. 디자인 시스템은 대기업만의 것이 아닙니다. 혼자서도 만들 수 있습니다. 완벽한 시스템보다 작동하는 시스템이 낫습니다. 시작이 곧 시스템의 탄생입니다.

앞으로도 UrbanLedger에서 더 깊이 있는 콘텐츠를 다룰 예정입니다.

📚 이 글과 함께 읽으면 좋은 추천 도서

디자인 구구단 보러가기 →

※ 파트너스 활동을 통해 일정액의 수수료를 받을 수 있습니다.

UI UX 디자인 트렌드 2025 완벽 정리 — 실무에서 바로 쓰는 7가지 핵심

2025 UI/UX 디자인 트렌드 7가지 — 좋은 디자인은 보이지 않는 곳에서 사용자를 돕는다

앱을 쓰다가 "어, 이거 되게 편한데?"라고 느끼면서도 왜 그런지 설명하기 어려웠던 적 있나요? 그게 바로 잘 만든 UX 디자인의 특징입니다. 사용자가 디자인을 의식하지 못할수록 그 디자인은 성공에 가깝습니다. 2025년, UI/UX는 보이지 않는 곳에서 더 깊이 사용자를 돕는 방향으로 진화하고 있습니다.

1. 미적 트렌드를 넘어 비즈니스 임팩트로

과거의 디자인 트렌드가 색상·폰트·레이아웃 같은 시각적 유행을 따랐다면, UI UX 디자인 트렌드 2025는 다릅니다. 전환율·이탈률·재방문율 같은 실제 비즈니스 지표를 움직이는 설계가 주목받고 있습니다. 아름다운가보다 사용자가 원하는 것을 얼마나 빠르게 달성하도록 돕는가가 기준이 되고 있습니다. 디자인의 역할이 꾸미는 것에서 결과를 만드는 것으로 이동하고 있습니다.

2. 2025 UI/UX 디자인 트렌드 7가지

트렌드 1. AI 연동 적응형 UI

사용자의 행동 패턴을 학습해 인터페이스 자체가 개인화됩니다. 같은 앱이지만 초보 사용자와 숙련 사용자에게 다른 UI를 보여주는 것이 대표적입니다. 메뉴 구조부터 정보 밀도까지, 사용자 맥락에 최적화된 인터페이스가 표준이 될 것으로 알려져 있습니다.

트렌드 2. 마이크로인터랙션의 진화

버튼을 눌렀을 때의 미세한 반응, 로딩 중 나타나는 작은 애니메이션. 사용자는 이것을 의식하지 못하지만, 없으면 분명히 느낍니다. 이 보이지 않는 피드백이 제품의 신뢰감과 완성도를 결정합니다. 앱 디자인 트렌드 중에서도 마이크로인터랙션은 비용 대비 UX 개선 효과가 가장 높은 영역으로 알려져 있습니다.

트렌드 3. 접근성 퍼스트 디자인

장애 여부와 관계없이 모두가 쓸 수 있는 설계가 이제 선택이 아닌 기준이 되고 있습니다. 접근성을 높이면 전체 사용자 경험이 함께 개선된다는 것이 실무에서 거듭 검증되고 있습니다. 더 큰 시장과 더 좋은 UX는 같은 방향을 가리킵니다.

트렌드 4. 멀티모달 인터페이스

터치·음성·제스처가 하나의 경험으로 통합되고 있습니다. 사용자는 상황에 따라 가장 편한 입력 방식을 자유롭게 선택하며, 웹 디자인 2025의 핵심 과제는 이 전환이 자연스럽도록 설계하는 것입니다. 입력 방식이 달라도 경험의 일관성이 유지되는 것이 핵심입니다.

트렌드 5. 감성적 미니멀리즘

단순함이 차갑지 않아야 합니다. 여백과 절제 속에서도 사용자가 따뜻함을 느끼도록 색온도·서체·일러스트를 조합하는 방향입니다. 기능을 줄이는 것이 아니라, 불필요한 시각적 노이즈를 걷어내는 것이 목표입니다.

트렌드 6. 데이터 시각화의 일상화

복잡한 수치를 한눈에 이해하도록 돕는 설계가 핀테크·헬스케어를 넘어 일반 앱에도 확산되고 있습니다. UX 트렌드 중 데이터 시각화는 정보를 보여주는 것이 아니라 이해하게 만드는 것을 목표로 합니다. 숫자보다 맥락이 먼저입니다.

트렌드 7. 지속가능한 UX

배터리·데이터 사용량·사용자의 주의력을 아끼는 설계가 가치로 인정받고 있습니다. 다크 모드·경량 애니메이션·집중 모드가 단순한 기능이 아닌 UX 철학으로 자리잡는 흐름입니다. 덜 쓰게 만드는 디자인이 더 좋은 디자인입니다.

3. 실무에서 바로 써먹는 법

UI UX 디자인 트렌드 2025를 몸에 익히는 가장 빠른 방법은 잘 만든 앱을 분석하는 것입니다. 화면을 캡처하며 "왜 이게 편한가"를 언어화하는 습관이 실력을 만듭니다. Figma 커뮤니티에는 트렌드를 반영한 UI 키트가 무료로 공개되어 있으며, 컴포넌트를 직접 뜯어보는 것만으로도 실무 감각이 쌓입니다. 트렌드 적용 우선순위는 접근성 개선부터 시작하는 것이 효율적입니다.

4. 디자인이 보이지 않을 때

7가지 UI UX 디자인 트렌드 2025의 공통점은 하나입니다. 사용자가 디자인을 의식하지 않아도 되는 경험을 만드는 것. 좋은 디자인은 보이지 않는 곳에서 사용자를 돕습니다. 트렌드를 쫓기보다, 그 안에 담긴 사용자 중심의 사고방식을 이해하는 것이 더 중요합니다. 당신의 디자인은 지금 어디에서 사용자를 돕고 있나요?

앞으로도 UrbanLedger에서 더 깊이 있는 콘텐츠를 다룰 예정입니다.

📚 이 글과 함께 읽으면 좋은 추천 도서

디자인 구구단 보러가기 →

※ 파트너스 활동을 통해 일정액의 수수료를 받을 수 있습니다.