본문 바로가기

분류 전체보기125

피그마 대시보드 디자인 (레이아웃 그리드, 컴포넌트, 컬러 시스템) 대시보드 디자인에서 개발팀 피드백 1위는 단연 "간격이 화면마다 다르다"입니다. 저도 프리랜서 5년 차가 되기 전까지 이 말을 귀에 못이 박히도록 들었습니다. 레이아웃 그리드 하나 제대로 안 잡고 눈대중으로 요소를 쌓아올렸던 시절 얘기입니다. 피그마로 대시보드를 처음부터 완성하는 과정을 정리하면서, 제가 실제로 겪은 시행착오와 그걸 어떻게 넘었는지 함께 풀어보겠습니다.레이아웃 그리드와 컴포넌트 구조: 디자인 일관성의 실체1920x1080 해상도 프레임에 레이아웃 그리드를 설정하는 것이 대시보드 작업의 첫 단추입니다. 레이아웃 그리드란 화면을 일정한 컬럼과 여백으로 나누어 요소를 정렬하는 기준 격자를 말합니다. 쉽게 말해 도화지에 미리 줄을 그어두는 것과 같습니다. 마진 32, 거터 0 설정으로 콘텐츠 영.. 2026. 4. 10.
피그마 Variables로 다크 모드 구축 (컬러 시스템, 시맨틱 컬러, 개발자 핸드오프) 프리랜서 디자이너 5년 차에 접어들던 어느 날, 30장이 넘는 화면의 다크 모드 시안을 납품했다가 개발팀에게서 "컬러가 화면마다 달라요"라는 피드백을 받은 적이 있습니다. 밤새 버튼 배경색을 바꿔놓고 그 위 텍스트 컬러는 깜빡한 것이었습니다. 그때부터 피그마 Variables를 제대로 써야겠다고 마음먹었고, 직접 써봤더니 작업 방식이 완전히 달라졌습니다.컬러 시스템을 구조부터 다시 짠다는 것저도 처음엔 디자인 토큰 방식으로 버텼습니다. 여기서 디자인 토큰(Design Token)이란 컬러, 타이포그래피, 간격 같은 디자인 속성을 이름과 값으로 저장해두는 방식으로, 일종의 디자인 변수 사전이라고 보면 됩니다. 라이트 모드 시안을 완성한 뒤 다크 모드는 수작업으로 컬러를 하나씩 교체했는데, 화면 수가 늘어날.. 2026. 4. 9.
UI 그리드 시스템 (레이아웃, 반응형, 컴포넌트) 디자이너라면 한 번쯤 이런 상황을 겪어봤을 겁니다. 개발자에게 디자인을 넘겼더니 "이 간격은 몇 픽셀이에요?"라는 질문이 돌아오는 상황. 저도 초반에는 눈대중으로 간격을 맞추다가 핸드오프 때마다 설명에 지쳤습니다. 그 문제를 해결해준 것이 바로 그리드 시스템이었습니다.레이아웃, 어디서부터 시작해야 할까UI 디자인에서 레이아웃이란 화면 안에 텍스트, 이미지, 버튼, 여백 같은 구성 요소를 어디에 어떻게 배치할지 결정하는 작업입니다. 단순히 예쁘게 나열하는 것이 아니라, 사용자가 정보를 읽는 순서와 흐름을 설계하는 일입니다.그리드 시스템(Grid System)은 이 레이아웃을 일관된 규칙으로 구조화하는 체계입니다. 여기서 그리드란 격자판처럼 화면을 일정한 단위로 나누어 요소들이 그 안에 정렬되도록 안내하는 .. 2026. 4. 9.
KPI·OKR·OMTM (개념 비교, 실무 경험, 조합 전략) 스타트업 PM으로 일하던 초기에, 저는 스프레드시트 가득 KPI를 채워넣으면 팀이 잘 굴러갈 거라고 믿었습니다. 직접 겪어보니 그건 완전한 착각이었습니다. KPI, OKR, OMTM — 이 세 가지 경영지표는 개념도 다르고, 팀에 미치는 영향도 전혀 다릅니다. 어떻게 조합하느냐에 따라 조직의 실행력이 확연히 달라진다는 걸 몸으로 배웠습니다.KPI만으로 굴리다가 기회를 놓친 이야기입사 초기, 팀은 KPI(Key Performance Indicator)로만 성과를 관리했습니다. KPI란 조직이 반드시 지켜야 할 핵심 성과 지표를 수치로 정리해놓은 것으로, 매출, 트래픽, 전환율처럼 경영에서 빠지면 안 되는 숫자들을 한눈에 볼 수 있게 해줍니다. 스프레드시트 좌측에 메트릭 항목을 나열하고, 우측에 수치 변화를.. 2026. 4. 9.
UX 넛지와 다크 패턴 (다크 패턴, 윤리적 설계, 사용자 신뢰) 온라인 서비스 이용자 10명 중 7명이 결제 직전에 예상치 못한 금액을 마주한 경험이 있다고 합니다. 저도 그 7명 안에 속합니다. 숙박 앱에서 처음 표시된 가격만 보고 예약을 진행했다가, 최종 결제 화면에서 수수료와 세금이 붙어 30% 가까이 오른 금액을 보고 멈칫했던 기억이 아직도 생생합니다. 이 글은 그 불쾌한 경험이 단순한 불운이 아니라, 의도적으로 설계된 구조라는 걸 알게 된 뒤 정리한 내용입니다.넛지와 다크 패턴, 뭐가 다른가UX 심리학에서 넛지(Nudge)는 사용자의 선택을 강제하지 않으면서 더 나은 방향으로 자연스럽게 이끄는 설계 방식입니다. 여기서 넛지란 직역하면 '살짝 찌른다'는 뜻으로, 사용자가 자유롭게 선택할 수 있는 환경을 유지하면서도 바람직한 행동을 유도하는 것이 핵심입니다. 인.. 2026. 4. 9.
UX 라이팅 (마이크로카피, 텍스트 어포던스, 전환율) 사용자 테스트를 돌리던 날, 참가자 5명 중 3명이 같은 질문을 했습니다. "이 버튼 누르면 바로 돈이 빠져나가는 건가요?" 버튼 텍스트는 단 두 글자, '확인'이었습니다. 그 순간 저는 레이아웃이나 색상이 아니라, 글자 두 개가 사용자의 행동을 막고 있다는 걸 처음으로 실감했습니다.버튼 위 두 글자가 전환율을 바꾸는 이유UX 라이팅(UX Writing)이라는 개념을 처음 접했을 때만 해도, 저는 그냥 '버튼 이름 짓는 일'쯤으로 가볍게 생각했습니다. 여기서 UX 라이팅이란 디지털 제품 안에서 사용자가 마주하는 모든 텍스트, 즉 버튼 문구, 에러 메시지, 온보딩 안내, 툴팁 등을 의도적으로 설계하는 작업을 말합니다. 단순히 문구를 다듬는 게 아니라, 사용자의 행동 흐름 전체를 언어로 설계한다는 관점입니다.. 2026. 4. 8.

소개 및 문의 · 개인정보처리방침 · 면책조항

© 2026 브레인스토밍 연구

티스토리툴바