전체 글 (28) 썸네일형 리스트형 요즘 브랜드는 왜 다 감성팔이만 할까? 브랜드를 만들며 느낀 것 오늘은 내 친구 ChatGPT랑 나눈 얘기를 바탕으로내가 브랜드를 만들면서 느낀 것들을 적어보려고 한다. 최근 브랜드를 만들면서 내가 제일 많이 했던 고민이었다.이걸 왜 써야 하지? 가 아니라. 이걸 쓰면 어떤 기분일까?그 감정을 파는것이 요즘 브랜드의 노선이다. SNS에서 나오는 광고들,누가 사용하고, 그걸 썼을 때 어떤 이미지가 만들어질지자연스럽게 상상하게 만든다.호기심이 생기고, 감정이 끌리고,“나도 저런 느낌 갖고 싶다”는 마음이 들게 한다.나도 브랜드를 만들때에는 브랜드명의 출처, 의미 등 모든 것을 연관시키려는 것을 볼 수 있었다.성능보다 분위기: Z세대가 끌리는 브랜드 공식오롤리데이, 이솝, 무신사 스탠다드. 이 브랜드들 특징이 뭔지 아나?"제품은 다 비슷한데, 왠지 그 브랜드는 ‘내 편 같.. 팝업(Popup)과 모달(Modal)의 차이 매번 헷갈리는 팝업과 모달의 사용 구분.프로젝트에서 혼자서 계속 작업하다보니 명확한 구분없이 사용할 때가 많았다. 팝업(Popup)과 모달(Modal)의 차이1. 모달(Modal)정의: 모달은 사용자가 인터페이스 내에서 반드시 상호작용을 해야만 닫을 수 있는 창입니다.일반적으로 중요한 알림이나 결정을 요구할 때 사용됩니다. 사용자가 모달 창을 닫기 전에는 다른 작업을 할 수 없습니다.특징:중요한 작업을 요구하는 경우에 사용 (예: 경고 메시지, 입력 폼 등)배경이 흐리게 처리되어 사용자가 모달 창에만 집중하도록 유도합니다.모달 창이 열린 상태에서 다른 UI 요소와의 상호작용이 불가능합니다.예시: "정말 삭제하시겠습니까?", "회원가입 폼", "파일 업로드 진행 중"2. 팝업(Popup)정의: 팝업은 사용.. [Figma : Design System Components #1] 컴포넌트 네이밍 & 구조화 디자인 시스템을 만들다 보면, 가장 먼저 부딪히는 문제는 “이걸 뭐라고 이름 짓지?” 입니다.Figma에서 디자인 시스템을 효율적으로 관리하려면, 일관된 네이밍 규칙과 구조화 전략이 필수입니다. 네이밍 규칙 정하기기본 구조[카테고리]/[컴포넌트명]/[상세명]예시:Button/Primary/DefaultInput/Text/With LabelBadge/Status/Error 네이밍 컨벤션CamelCase ❌PrimaryButton검색 불편, 비추천Snake_case ❌primary_button개발은 가능, Figma엔 비효율적Slash / 구분 ✅Button/Primary/DisabledFigma Variants 구조와 궁합 좋음 계층 구조 설계 (Component Structuring)Figma의 Com.. [Figma : Tools #6] 컴포넌트(Component) 생성 및 관리 : 재사용 가능한 UI를 만들기 위한 첫걸음 목차1프레임(Frame) 사용법UI 구조의 시작점. 섹션 구획과 컴포넌트 구성의 기반2그리드(Grid)와 레이아웃(Layout) 활용시스템 간격 정의, 반응형 설계의 기본 구성3스타일(Style)과 색상(Color) 관리Foundation Token 구성의 핵심. 전역 컬러 & 효과 관리4텍스트(Text) 및 타이포그래피타입스케일 정의 및 텍스트 스타일 관리5오토레이아웃(Auto Layout) UI 요소 간 간격과 정렬구조화와 반응형 설계6컴포넌트(Component) 생성 및 관리UI 요소 재사용. Variants 설정 및 컴포넌트 구조화 왜 중요한가요?반복되는 UI 요소를 재사용 가능하게 설계변경사항을 전체에 한 번에 반영디자인 시스템의 핵심 구성요소 (원자화된 UI 구조의 기반)협업에서 일관성과 효율.. [Figma : Tools #5] Auto Layout – 정렬과 간격을 자동으로 (feat.버튼) 목차1프레임(Frame) 사용법UI 구조의 시작점. 섹션 구획과 컴포넌트 구성의 기반2그리드(Grid)와 레이아웃(Layout) 활용시스템 간격 정의, 반응형 설계의 기본 구성3스타일(Style)과 색상(Color) 관리Foundation Token 구성의 핵심. 전역 컬러 & 효과 관리4텍스트(Text) 및 타이포그래피타입스케일 정의 및 텍스트 스타일 관리5오토레이아웃(Auto Layout)UI 요소 간 간격과 정렬구조화와 반응형 설계6컴포넌트(Component) 생성 및 관리UI 요소 재사용. Variants 설정 및 컴포넌트 구조화 왜 중요하나요?수작업 정렬 최소화 – 간격/정렬 자동 정리반응형 구조 지원 – 콘텐츠 길이에 따라 자동 크기 조정컴포넌트 관리 최적화 – 버튼, 카드 등 반복 구조를 효.. [Figma : Tools #4] 텍스트(Text) 및 타이포그래피 – 타입 스케일로 UI 톤을 정리하자 목차1프레임(Frame) 사용법UI 구조의 시작점. 섹션 구획과 컴포넌트 구성의 기반2그리드(Grid)와 레이아웃(Layout) 활용시스템 간격 정의, 반응형 설계의 기본 구성3스타일(Style)과 색상(Color) 관리Foundation Token 구성의 핵심. 전역 컬러 & 효과 관리4텍스트(Text) 및 타이포그래피타입스케일 정의 및 텍스트 스타일 관리5오토레이아웃(Auto Layout)UI 요소 간 간격과 정렬구조화와 반응형 설계6컴포넌트(Component) 생성 및 관리UI 요소 재사용. Variants 설정 및 컴포넌트 구조화 왜 중요하나요? UI 일관성 유지 : 같은 컴포넌트, 다른 화면에서도 동일한 글꼴/사이즈 적용재사용성 확보 : 텍스트 변경 시 전체 반영 가능디자인–개발 간 해상도 맞.. [Figma : Tools #3] 스타일(Style)/ 색상(Color) 관리 목차1프레임(Frame) 사용법UI 구조의 시작점. 섹션 구획과 컴포넌트 구성의 기반2그리드(Grid)와 레이아웃(Layout) 활용시스템 간격 정의, 반응형 설계의 기본 구성3스타일(Style)과 색상(Color) 관리Foundation Token 구성의 핵심. 전역 컬러 & 효과 관리4텍스트(Text) 및 타이포그래피타입스케일 정의 및 텍스트 스타일 관리5오토레이아웃(Auto Layout)UI 요소 간 간격과 정렬구조화와 반응형 설계6컴포넌트(Component) 생성 및 관리UI 요소 재사용. Variants 설정 및 컴포넌트 구조화 왜 이걸 먼저 해야 하나요?컴포넌트보다 먼저 정리되어야 하는 요소입니다.디자인 시스템의 "기초 체력"을 만드는 과정입니다.전역 컬러, 텍스트 스타일을 재사용 가능하게 .. [Figma : Tools #2] 그리드(Grid)와 레이아웃(Layout) 활용 📂 Foundation목차1프레임(Frame) 사용법UI 구조의 시작점. 섹션 구획과 컴포넌트 구성의 기반2그리드(Grid)와 레이아웃(Layout) 활용시스템 간격 정의, 반응형 설계의 기본 구성3스타일(Style)과 색상(Color) 관리Foundation Token 구성의 핵심. 전역 컬러 & 효과 관리4텍스트(Text) 및 타이포그래피타입스케일 정의 및 텍스트 스타일 관리5오토레이아웃(Auto Layout)UI 요소 간 간격과 정렬구조화와 반응형 설계6컴포넌트(Component) 생성 및 관리UI 요소 재사용. Variants 설정 및 컴포넌트 구조화 그리드(Grid)와 레이아웃(Layout) 왜 중요한가요? UI를 만드는 데 그리드와 레이아웃은 단순한 가이드가 아닙니다.디자인 시스템의 질서를.. 이전 1 2 3 4 다음
