#design
노트 54개
Frontend › Accessibility
디자인 단계의 접근성접근성 문제는 상당수가 디자인 단계에서 막힌다. 포용적 디자인 일곱 원칙, 장애를 담은 페르소나와 시뮬레이터의 한계, 접근성 휴리스틱 리뷰, 핸드오프 전 접근성 주석, 그리고 컴포넌트·패턴·디자인 시스템을 고르는 기준을 정리한다.
Frontend › Accessibility
색과 움직임의 접근성저시력·색각 결핍 사용자는 스크린 리더가 아니라 화면을 본다. 색만으로 정보를 전하지 않고, 텍스트와 필수 그래픽의 대비를 지키고, prefers-color-scheme·prefers-contrast·prefers-reduced-motion으로 사용자 설정을 존중하고, 움직임은 기본을 줄인 상태로 두고 5초 넘는 자동 애니메이션은 멈출 수 있게 한다.
Frontend › Architecture
컴포넌트를 분리하는 기준과 방법컴포넌트를 나누는 이유는 재사용, 복잡성, 렌더링 범위 세 가지다. 재사용할 컴포넌트는 주변 HTML 문맥에 기대지 않을 만큼 일반적이어야 하고, 쓰는 곳마다 조건문이 붙는다면 중복이 아니므로 고유한 부분은 props로 넘긴다. 복잡한 컴포넌트는 책임과 변경 빈도(UI vs 비즈니스 로직)를 기준으로 나누고, 서로 무관한 상태는 각자의 컴포넌트로 내린다.
Frontend › Architecture
프론트엔드 폴더 구조의 진화역할 기반 폴더(components·hooks·services)에서 출발해 순수 UI와 도메인 컴포넌트를 나누고, 페이지를 독립시키고, 다시 엔티티(데이터)·위젯(화면)·기능(행동) 중심으로 응집해 가는 과정을 따라가며, 좋은 폴더 구조는 팀의 멘탈 모델과 일치하는 구조라는 결론을 정리한다. FSD를 규칙이 아니라 렌즈로 쓰는 법.
Frontend › Architecture
프론트엔드에서 의존성 관리하기의존성은 곧 변경에 노출되는 관계다. 변수는 스코프를 좁히고 값을 바꾸는 길을 하나로 만들고, 여러 곳이 쓰는 함수는 의존성 역전으로 계약에 기대게 하고, 타입은 API 응답이 아니라 잘 바뀌지 않는 도메인 타입에 기대게 한다.
Frontend › Architecture
프론트엔드와 SOLID 원칙객체 지향 설계 원칙 SOLID(SRP·OCP·LSP·ISP·DIP)를 React 컴포넌트와 함수 위주 JS·TS 코드에 옮겨 본다. 책임은 요구 사항 단위로 나누고, 분기 대신 확장으로 기능을 늘리고, props는 필요한 만큼만 받고, 데이터 소스는 추상화 뒤에 숨긴다.
Frontend › Architecture
Feature-Sliced Design프론트엔드 코드를 레이어 → 슬라이스 → 세그먼트 3단계로 나누고, 위 레이어만 아래 레이어를 쓰게 하며, 슬라이스는 Public API로만 드나들게 하는 아키텍처 방법론. 구조, 규칙, 다른 구조와의 비교, Next.js와 함께 쓸 때의 충돌, 그리고 레이어 경계를 정하고 점진적으로 도입하는 법을 정리한다.
Frontend › CSS
웹 타이포그래피: 가독성, 글줄 길이, 웹폰트사람이 화면의 글을 읽는 방식에서 출발해 글줄 길이(45~85자, ch 단위), 글자 크기와 줄 간격의 균형, x-height를 맞추는 font-size-adjust, 자간·단어 간격과 가변 폰트, 양쪽 정렬과 하이픈, 대비와 다크 모드, 그리고 @font-face로 웹폰트를 선언하는 법까지.
Frontend › CSS
테마와 다크 모드 구현: theme-color, color-scheme, accent-color테마는 페이지 색만이 아니라 브라우저 UI(theme-color), 브라우저가 그리는 폼·스크롤바(color-scheme), 체크박스·라디오 강조색(accent-color), 아이콘과 사진까지 함께 바꿔야 완성된다. 색 값은 커스텀 속성에 모아 한 번만 재정의하고, 사진은 밝기를 낮추거나 picture로 바꿔 끼운다.
Frontend › CSS
CSS 배경과 그라디언트모든 박스 뒤에는 배경 레이어가 있다. background-color 위에 이미지·그라디언트를 여러 겹 쌓고, repeat·position·size·attachment·origin·clip으로 각 겹을 조절한다. linear·radial·conic 그라디언트와 반복형, 색 공간을 고르는 보간(in oklch)까지 정리한다.
Frontend › CSS
CSS 시각 효과: 필터, 블렌드 모드, 클리핑, 마스킹그래픽 도구에서 하던 효과를 CSS로 실시간 적용한다. 요소 픽셀을 바꾸는 filter와 뒤 배경만 바꾸는 backdrop-filter, 겹친 층의 색을 섞는 블렌드 모드와 isolation, 도형으로 보이는 영역을 자르는 clip-path, 이미지 픽셀로 투명도를 정하는 mask, 글이 도형을 따라 흐르게 하는 shape-outside까지 정리한다. 같은 이미지 효과를 필터·블렌드·SVG·캔버스로 걸 때의 비용 차이와, 비표준 반사(-webkit-box-reflect)를 마스크로 대신하는 법도 다룬다.
Frontend › CSS
CSS 커스텀 속성으로 색상 체계 짜기색상 변수를 팔레트·기능 색상·컴포넌트 색상의 세 단계로 나누고 CSS 커스텀 속성으로 연결하면 테마, 다크 모드, 화이트 라벨, 대비 조정이 변수 몇 개만 바꾸는 일이 된다. 전처리기 변수와의 차이, 모든 변수를 :root에 두면 안 되는 이유까지.
Frontend › CSS
CSS 테두리와 그림자테두리는 style을 정해야 보이고, 색은 기본으로 currentColor를 따른다. border-radius의 타원 모서리와 아홉 조각으로 자르는 border-image, 그리고 상자에 붙는 box-shadow, 글자에 붙는 text-shadow, 투명 영역의 윤곽을 따르는 drop-shadow() 필터를 용도별로 비교한다.
Frontend › Graphics
Animated Icon: 영상을 투명 배경 아이콘으로 쓰기Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.
Frontend › UI Design
개발자를 위한 시각 디자인 요령: 위계, 대비, 그림자, 구분선디자이너 없이 UI를 다듬을 때 쓰는 요령. 위계는 크기보다 색과 굵기로, 색 배경 위 글자는 회색 대신 배경색 계열로, 그림자는 퍼짐보다 세로 오프셋으로, 구분은 테두리 대신 그림자·배경색·여백으로, 버튼은 의미보다 중요도로 스타일을 정한다. 뉴모피즘 같은 스타일 유행의 원리와 한계도 함께 본다.
Frontend › UI Design
나쁜 아이콘과 좋은 아이콘: 아이콘 사용성아이콘은 잘 만들면 텍스트보다 빨리 읽히지만, 의미가 모호하면 퍼즐이 되고 시각적 잡음이 된다. 나쁜 아이콘의 다섯 가지 유형, 아이콘의 비용과 이점, 좋은 아이콘의 조건을 정리했다. 결론은 투자할 여력이 없으면 텍스트 링크가 낫다는 것이다.
Frontend › UI Design
디자이너는 어떻게 코드를 배우나디자이너가 코드를 배우는 목적은 엔지니어가 되는 것이 아니라 디자인의 재료를 이해하는 것이다. 터미널과 코드 에디터, Git의 포크·커밋·풀 리퀘스트, 시맨틱 HTML과 CSS 기초, 토큰·컴포넌트·DRY 같은 공학 개념을 순서대로 익히고, 공학적 결정은 엔지니어에게 맡긴다.
Frontend › UI Design
디자인 도구와 개발자 핸드오프디자인 핸드오프는 이미지와 문서를 메일로 넘기던 방식에서 브라우저 기반 공유 파일(Figma)로 옮겨 왔다. 개발자는 스타일·변수 확인, 치수 측정, 애셋 추출, 프로토타입 흐름 읽기, 댓글로 협업한다. Inspect 코드는 그대로 쓰지 않고, absolute 좌표는 흐름으로, Auto Layout은 Flexbox로 옮긴다. 디자인은 실제 데이터와 여러 화면 크기로 검증하고, 도구 이전은 비용을 계산해 한 번에 끝낸다.
Frontend › UI Design
디자인 시스템: 구성, 도입, 구축과 배포디자인 시스템은 팀이 같은 UI를 같은 규칙으로 만들게 하는 원칙·스타일·컴포넌트·문서의 묶음이다. 무엇으로 이루어지는지, 작은 팀도 필요한 이유와 도입 시점, 감사→기준 합의→파운데이션·컴포넌트 정리→개발 합의→QA로 이어지는 구축 절차, 토큰과 컴포넌트를 중앙 모노레포에서 패키지로 배포하는 구조까지 정리했다. 감사는 인터페이스 인벤토리로, 시각 방향은 스타일 타일·요소 콜라주로 가볍게 합의한다.
Frontend › UI Design
레이아웃 그리드와 간격 체계: 12단 그리드, 8pt 그리드, 수직 리듬화면에 질서를 주는 세 가지 수치 체계. 단위·거터·칼럼·필드로 이뤄진 칼럼 그리드와 3·4·6단으로 나뉘는 12단 그리드, 모든 크기·간격을 8의 배수로 맞추는 8pt 그리드(하드·소프트 방식, 4pt 기준선), 본문 줄 높이를 기준으로 세로 간격을 맞추는 수직 리듬과 모듈러 스케일을 정리하고, CSS Grid·rlh·text-box-trim·디자인 토큰으로 구현하는 법을 붙였다.
Frontend › UI Design
모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.
Frontend › UI Design
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
Frontend › UI Design
와이어프레임, 목업, 프로토타입: 충실도에 따른 화면 설계 산출물화면 설계는 정보 구조와 유저 플로우에서 시작해, 구조와 우선순위만 담은 와이어프레임, 실제 생김새를 입힌 정적인 목업, 클릭해 볼 수 있는 프로토타입 순으로 충실도를 높여 가며, 단계마다 답하려는 질문과 버려도 되는 비용이 다르다. 와이어프레임은 클릭되게 만들고, 도구는 공통 요소 관리·화면 전환·리뷰·산출물 기준으로 고른다.
Frontend › UI Design
웹 레이아웃 디자인: 인쇄와 다른 매체웹은 크기가 고정되지 않은 매체다. 화면 폭 대응은 고정폭·리퀴드·적응형을 거쳐 반응형으로 왔고, 지금은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 늘고 줄어드는 본질의 웹 디자인(Intrinsic Web Design)이 기본이다. 페이지(매크로)와 컴포넌트(마이크로) 레이아웃을 나눠 설계하고, 인쇄의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로, 칼럼 그리드와 8pt 간격 체계는 CSS 그리드와 디자인 토큰으로 이어지며, 이미지 위 텍스트는 대비·위치·심도로 읽히게 한다.
Frontend › UI Design
인터페이스 심리학: 지각·인지·감정·사회적 반응사용성은 사람의 지각·인지 특성에 맞출 때 생긴다. 순서 있는 값은 밝기로·범주는 색상으로 보여 주는 지각 원리, 청킹, 어포던스, 재인과 회상, 초보자와 숙련자를 위한 여러 경로, 감성 컴퓨팅, 컴퓨터 매개 소통과 시선, 의인화와 불쾌한 골짜기, 그리고 설계가 사람에게 미치는 영향의 윤리를 정리한다.
Frontend › UI Design
전자상거래 UI 디자인쇼핑몰 UI의 목표는 구매 여정(진입 → 탐색 → 상품 검토 → 옵션 선택 → 결제)에서 마찰을 없애는 것이다. 얕은 메뉴·필터·정렬·검색으로 찾게 하고, 상품 페이지 첫 화면에 가격·옵션·배송·반품을 담고, 옵션 종류에 맞는 선택 UI와 품절 표시를 쓰고, 가격 필터 슬라이더는 실제 범위와 재고 분포를 보여 줘 결과 0건을 막는다.
Frontend › UI Design
제스처 기반 인터페이스터치 기기에서는 스와이프·당기기·드래그 같은 제스처가 버튼과 바를 줄이고 화면을 콘텐츠에 내준다. 대신 제스처는 보이지 않아서 학습 곡선이 생기고, 운영체제 제스처와 충돌하며, 일부 사용자는 쓸 수 없다. 점진적 힌트로 가르치고, 같은 기능을 버튼으로도 제공하고, 시간과 애니메이션까지 프로토타입으로 검증한다.
Frontend › UI Design
Apple Human Interface Guidelines 요약: 원칙, 레이아웃, 바, 버튼, 알림Apple의 Human Interface Guidelines(HIG)에서 앱·모바일 UI 전반에 쓸 수 있는 지침을 모은 노트. 설계 원칙 여섯 가지, 적응형 레이아웃과 안전 영역·44pt 터치 영역, 내비게이션 구조, 계정 생성·삭제, 알림·배지, 평가 요청, 애니메이션·브랜딩·색·시작 화면·용어·타이포그래피·이미지 해상도·앱 아이콘, 내비게이션 바·검색 바·상태 바·탭 바·툴바, 경고창, 버튼(스타일·역할·토글·팝업·닫기), 진행 표시, 텍스트 필드까지 다룬다.
Frontend › UI Design
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.
Frontend › UI Design
UI 모션 디자인: 애니메이션 원칙, 모션 커브, 안무UI 애니메이션을 자연스럽게 만드는 원리. 디즈니의 애니메이션 12원칙을 웹에 옮기는 법, 속도는 모션 커브의 기울기라는 이해와 cubic-bezier 읽기, 축마다 다른 타이밍으로 곡선 경로를 만드는 겹친 애니메이션과 offset-path, 여러 요소를 시차로 움직이는 안무, 60fps를 지키는 구현 규칙을 정리한다.
Frontend › UI Design
UI 밀도: 시각·정보·디자인·시간·가치UI 밀도는 화면에 많이 담는 것이 아니라, 인터페이스가 차지하는 시간과 공간 대비 사용자가 얻는 가치다. 첫인상의 시각 밀도는 믿을 수 없고, 터프티의 데이터-잉크 비율(정보 밀도)과 게슈탈트 원리로 센 디자인 결정의 비율(디자인 밀도)이 더 쓸모 있다. 시간 밀도는 로딩과 대기의 체감(100ms·1초·10초·1분 구간)으로 다루고, 결국 가치 밀도를 최대화하는 것이 목표다.
Frontend › UI Design
UI 요소 용어집: 입력·내비게이션·정보·컨테이너디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.
Frontend › UI Design
UX 라이팅: 원칙, 가이드라인, 체크리스트제품 화면의 문구를 사용자의 목표에 맞춰 쓰는 UX 라이팅. 원칙 → 가이드라인 → 체크리스트로 이어지는 문서 구조와, 문구를 검토하는 8가지 기준(목표 적합성, 모바일, 훑어보기, 이유 먼저, 전문 용어, 다크 패턴, 일관성, 보이스 톤)을 정리했다.
Frontend › Web
지속 가능한 웹 디자인웹사이트의 에너지 사용은 전송 데이터·CPU·서버 자원으로 어림할 수 있고, 이를 줄이는 일은 곧 성능·접근성·SEO 개선이다. 필요 없는 요청과 기능을 빼고, 이미지·폰트·영상·분석 도구를 의심하고, 서버 캐시와 재생 에너지 호스팅을 쓴다.
Frontend
Quasar 프레임워크 기초Vue 3 기반 UI 프레임워크 Quasar의 q- 컴포넌트와 유틸리티 클래스, 레이아웃·페이지 구조와 중첩 라우팅, 플러그인으로 쓰는 기능(Dialog), 폼 검증 라이브러리 연동을 정리한다.
Backend › Architecture
도메인 주도 설계(DDD)비즈니스 도메인을 모델로 표현하고 그 모델이 코드·DB·API 설계를 이끌게 하는 방법론이다. 유비쿼터스 언어와 바운디드 컨텍스트로 모델의 경계를 잡고, 엔티티·값 객체·애그리거트로 모델을 짜며, 리포지토리·팩토리·도메인 서비스·도메인 이벤트로 다룬다.
Backend › Architecture
시스템 설계의 품질 속성과 트레이드오프확장성·가용성·신뢰성·성능이라는 네 가지 품질 속성의 뜻과 달성 수단, 설계에서 늘 부딪치는 다섯 가지 트레이드오프, 시스템 설계를 이루는 빌딩 블록, 목표·범위·규모에서 상위 설계·병목까지의 설계 진행 순서와 지연 시간 숫자로 하는 어림셈, 요구 사항에서 이전 계획까지 설계 논의의 체크리스트, 그리고 CAP·BASE·KISS 같은 약어를 한 곳에 정리했다.
Computer Science › Programming Languages
같은 문제, 열다섯 가지 설계: 상태와 결합을 다루는 법터틀 그래픽(앞으로 가기, 돌기, 펜 올리기)이라는 단순한 문제를 객체 지향 클래스부터 순수 함수 모듈, 함수형 코어 API, 에이전트, 인터페이스·함수 의존성 주입, 상태 모나드, 커맨드 배치, 이벤트 소싱, 스트림 처리, 인터프리터, 추상 자료형, 능력 기반 API까지 열다섯 가지로 구현하며 상태를 누가 쥐는지와 구현과 어떻게 떼어 내는지를 비교한다. 행동(인터페이스)이 아니라 데이터(커맨드 타입)로 결합을 끊는 방식의 장점도 정리한다.
Computer Science › Programming Languages
좋은 코드를 위한 열 가지 원칙코드 규약 준수, 이유를 남기는 주석, 견고함, SOLID, 테스트하기 쉬운 구조, 적당한 추상화, 과설계 없는 패턴 사용, 전역 의존 줄이기, 지속적인 리팩터링, 보안 우선이라는 열 가지 코딩 원칙을 각각 왜 필요한지와 함께 정리하고, 원칙끼리 부딪칠 때의 판단 기준을 덧붙인다.
Computer Science › Programming Languages
클린 코드: 함수와 이름『클린 코드』의 함수와 이름 규칙을 정리한다. 나쁜 코드가 비싼 이유와 보이스카우트 규칙, 피해야 할 습관도 다룬다. 함수는 작게, 한 가지만, 한 추상화 수준으로 쓰고 위에서 아래로 이야기처럼 읽히게 배치한다. 값을 돌려주는 질의와 상태를 바꾸는 명령은 나눈다(명령-질의 분리). 타입 분기는 팩터리 한 곳에 가두고 나머지는 다형성에 맡기며, 이름은 의도를 드러내고 한 개념에 한 단어만 쓴다.
Computer Science › Programming Languages
프로그래밍 패러다임명령형·선언형·객체 지향·함수형·반응형·관점 지향·제네릭·동시성 프로그래밍이 각각 무엇을 중심에 두고 코드를 짜는지 비교한다. 패러다임을 레코드·클로저·동시성·이름 붙은 상태 같은 개념의 묶음으로 보는 관점, 관찰 가능한 비결정성과 상태 표현력이라는 두 축, 새 개념이 필요하다는 신호인 창조적 확장 원칙, goto를 없앤 구조적 프로그래밍, 명령형·함수형·객체 지향의 차이와 객체 지향의 네 기둥(추상화, 캡슐화, 상속, 다형성)과 추상화·캡슐화·정보 은닉의 구분, is-a·has-a 관계를 정리한다. 함수형의 순수 함수·부수 효과·참조 투명성과 순수 함수가 스레드 안전한 이유, 클래스와 객체 지향이 같은 말이 아닌 이유도 다룬다.
Computer Science
소프트웨어 복잡성: 본질적 복잡성과 우발적 복잡성큰 소프트웨어를 만들기 어려운 근본 원인은 이해하기 어렵다는 것, 곧 복잡성이다. 문제 자체에 있는 본질적 복잡성과 도구·설계가 덧붙인 우발적 복잡성을 나누고, 복잡성의 주원인인 상태·제어 흐름·코드 양, 「단순함(simple)」과 「쉬움(easy)」의 차이와 얽힘(complect), 피하고(avoid) 분리하라(separate)는 처방을 정리한다.
AI & Data
데이터 시각화: 인코딩, 차트 고르기, 디자인 원칙시각화는 데이터의 각 열을 위치·길이·색 같은 시각 채널에 대응시키는 일이다. 그래픽 문법의 일곱 요소로 차트를 분해하고, 데이터 유형과 지각 특성으로 채널을 고르고, 크기·분포·비율·관계·시간 변화라는 질문으로 차트를 고른 뒤, 잉크 비례·겹침 풀기·적고 의미 있는 색·직접 레이블·옅은 맥락 요소로 다듬고 3차원은 피한다.
AI & Data
미드저니 프롬프트 파라미터미드저니 프롬프트 끝에 붙이는 --ar, --s, --c, --w, --sref, --sw, --p, --v 같은 파라미터의 뜻과 범위를 크리스마스 디자인용 프롬프트 예시로 정리했다.
AI & Data
시각화 설계 과정: 과업 분석, 상호작용, 평가시각화 도구는 사용자가 데이터로 무엇을 하려는지(과업)를 먼저 끌어내고, 스케치와 프로토타입을 반복해 형태를 정하고, 개관 → 확대·필터 → 세부 순서의 상호작용을 붙인 뒤, 사용자가 얻은 통찰(정성)과 통제 실험의 정확도·속도(정량)로 평가한다.
AI & Data
AI 기능의 UX 패턴: 배경형·제한형·개방형AI 기능은 사용자에게 드러나는 정도에 따라 배경형(조용히 기존 경험을 돕는다), 제한형(버튼으로 정해진 작업을 부른다), 개방형(자유 입력)으로 나뉜다. 노출이 클수록 유연하지만 위험도 커진다. 유형별 예와 모범 사례, 둘 중 고르는 기준, 투명성·안내·제어·신뢰 보정·실패 관리 패턴 표를 정리한다.
AI & Data
AI 모델로 완성도 높은 프론트엔드 디자인 뽑기AI는 상상보다 모방을 잘한다. 디자인 시스템·시각 레퍼런스(와이어프레임·스크린샷·무드보드)·서사·검증 도구를 미리 주고 기본 폰트·아이콘을 바꾸면 흔한 템플릿 대신 의도가 분명한 UI가 나온다.
AI & Data
AI 이미지를 쓸모 있는 벡터로 바꾸기미드저니로 그린 래스터 이미지를 업스케일러로 키우고 일러스트레이터 이미지 추적(Image Trace)으로 벡터화하면, 지저분한 픽셀이 정리된 편집 가능한 벡터를 쉽게 얻는다. 단계별 역할과 추적 설정을 정리했다.
Career › Product
공감하는 제품 만들기: 경청 세션과 스트레스 케이스공감은 친절이 아니라 상대의 사고 흐름을 이해하는 기술이다. 표면 의견 밑의 이유와 망설임을 듣는 경청 세션 진행법, 엣지 케이스를 스트레스 케이스로 바꿔 보는 관점, 사전 부검으로 해로운 시나리오를 미리 찾는 법을 정리했다.
Career › Product
디자이너와 함께 일하기: 역할·채용·협업그래픽·인터랙션·UX 디자인의 차이, 디자이너를 뽑기 전에 정할 권한과 성공 기준, 서로 다른 관점을 섞는 팀 구성(경쟁가치모형), 디자이너·개발자·고객·브랜드 에이전시가 함께 일하는 원칙을 정리했다.
Career › Product
사용자 리서치: 방법 고르기, 페르소나·시나리오, 사용성 평가더블 다이아몬드의 단계마다 맞는 리서치 방법이 다르다. 사용자를 직접 못 만나면 리뷰·상담 기록·포럼을 쓰고, 조사 결과는 근거 있는 페르소나와 사용 전·중·후 UX 시나리오로 정리해 UX 전략으로 잇는다. 화면은 닐슨의 10가지 휴리스틱 평가와 5명 단위 사용성 테스트로 검증하고, 큰 조직에서는 정기 세션으로 학습 문화를 만든다. 급할수록 맥락·분석 시간·자기 디자인에 대한 애착을 경계하고, 참가자 보호를 위한 윤리 절차를 갖춘다.
Career › Product
상세페이지 9단계 구조상세페이지는 고객이 의심을 하나씩 풀며 구매 버튼까지 스크롤을 내리게 하는 싸움이다. 유입과 전환, 세일즈 퍼널을 바탕으로 판매 증거 → 판매 관리 → 인증 → 메인 이미지 → 문제 → 상세 이미지 → 공감 → 액션 → 상세 정보의 9단계를 고객의 질문 순서로 정리하고, 강점을 위로 올리는 조정법과 표시·광고 규정, 접근성 주의점을 덧붙인다.
Life & Learning
글쓰기, 저널리즘, 디자인, 영어, 공부법, 유학 준비처럼 개발 밖에서 모은 교양·실용 지식.
Life & Learning
발표·포트폴리오 디자인 팁3의 법칙, 정렬, 자간, 굵기로 하는 강조, 키워드 중심 구성 등 발표 자료를 깔끔하게 만드는 원칙과 상업적 이용 가능한 무료 폰트를 구하는 곳.