#ux
노트 41개
Frontend
Accessibility장애가 있는 사람도 웹을 인지하고 조작하고 이해할 수 있게 만드는 일. 장애는 능력과 환경의 불일치이고, 브라우저는 시맨틱 HTML로 접근성 트리를 만들어 보조 기술에 넘기며, WCAG가 최소선을 정한다. 표준을 지켜도 쓰기 어려울 수 있어 장애인과의 사용성 테스트와 조직 차원의 우선순위가 필요하다. 사용자 관점과 WCAG, 시맨틱 구조·대체 텍스트·폼·ARIA·키보드·위젯·CSS 기법, 자동·수동 평가와 스크린 리더 테스트를 하위 노트로 잇는다.
Frontend › Accessibility
대체 텍스트, 링크, 쉬운 글대체 텍스트는 이미지가 그 자리에서 하는 일을 글로 바꾼 것이라 같은 사진도 맥락에 따라 alt가 달라진다. 링크는 맥락 없이 목록으로만 들어도 뜻이 통해야 하고, 본문 글은 짧은 문장·익숙한 낱말·논리적 구성으로 인지 부담을 줄인다.
Frontend › Accessibility
디자인 단계의 접근성접근성 문제는 상당수가 디자인 단계에서 막힌다. 포용적 디자인 일곱 원칙, 장애를 담은 페르소나와 시뮬레이터의 한계, 접근성 휴리스틱 리뷰, 핸드오프 전 접근성 주석, 그리고 컴포넌트·패턴·디자인 시스템을 고르는 기준을 정리한다.
Frontend › Accessibility
색과 움직임의 접근성저시력·색각 결핍 사용자는 스크린 리더가 아니라 화면을 본다. 색만으로 정보를 전하지 않고, 텍스트와 필수 그래픽의 대비를 지키고, prefers-color-scheme·prefers-contrast·prefers-reduced-motion으로 사용자 설정을 존중하고, 움직임은 기본을 줄인 상태로 두고 5초 넘는 자동 애니메이션은 멈출 수 있게 한다.
Frontend › Accessibility
스크린 리더로 테스트하기스크린 리더 테스트는 읽는 순서, 대체 텍스트, 제목·랜드마크·폼·표의 의미가 실제로 어떻게 들리는지 확인한다. 데스크톱은 NVDA나 JAWS 하나에 VoiceOver를, 모바일은 iOS VoiceOver와 Android TalkBack을 쓰고, 각 스크린 리더의 최소 단축키(읽기 시작·중지, 제목·랜드마크·폼 이동, 요소 목록)만 익히면 기본 점검이 된다.
Frontend › Accessibility
자막, 대본, 음성 해설동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
Frontend › Accessibility
장애 유형별 웹 사용시각·청각·운동·인지·발작과 전정·말하기 장애 사용자가 어떤 보조 기술로 웹을 쓰고 어디서 막히는지 정리한다. 진단명보다 기능적 어려움으로 보고, 하나의 설계가 사용자의 조정과 보조 기술을 받아들이게 만드는 것이 핵심이다.
Frontend › Accessibility
접근 가능한 위젯: 펼침·탭·캐러셀펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
Frontend › Accessibility
접근 가능한 페이지 구조스크린 리더·키보드 사용자는 페이지를 위에서부터 읽지 않고 제목·랜드마크·링크 목록으로 건너뛰며 탐색한다. 페이지 제목, 문서 언어, 제목 계층, 영역, 목록, 건너뛰기 링크, 사이트 검색, iframe 제목, 데이터 표의 머리글 연결이 그 탐색 경로를 만든다.
Frontend › Accessibility
접근성 평가 방법과 도구접근성 감사는 기준선을 잡고 개발 주기 내내 반복하는 자동·수동·보조 기술 테스트의 조합이다. 자동 검사 도구는 명백한 오류와 사람이 볼 곳을 짚어 줄 뿐 접근 가능한지는 판정하지 못하므로, DevTools로 이름을 확인하고 키보드·시각·콘텐츠·확대·스크린 리더 순으로 수동 점검한다. 결과는 ACR(VPAT)로 보고하고, 오버레이 제품은 이 과정을 대신하지 못한다.
Frontend › Accessibility
키보드 접근성과 포커스 관리모든 기능은 키보드만으로 쓸 수 있어야 한다. 표준 키 조작, :focus-visible로 지키는 포커스 표시와 WCAG 2.2의 Focus Not Obscured, 소스 순서와 tabindex, inert와 <dialog>로 만드는 안전한 모달, 장치 독립 이벤트와 동적 콘텐츠의 포커스 처리를 정리한다.
Frontend › React
MUI Dialog로 삭제 확인 창 만들기되돌릴 수 없는 동작 전에 한 번 더 묻는 확인 다이얼로그를 MUI Dialog로 재사용 가능하게 만들고, 위험한 버튼을 덜 눈에 띄게 디자인하는 방법.
Frontend › UI Design
개발자를 위한 시각 디자인 요령: 위계, 대비, 그림자, 구분선디자이너 없이 UI를 다듬을 때 쓰는 요령. 위계는 크기보다 색과 굵기로, 색 배경 위 글자는 회색 대신 배경색 계열로, 그림자는 퍼짐보다 세로 오프셋으로, 구분은 테두리 대신 그림자·배경색·여백으로, 버튼은 의미보다 중요도로 스타일을 정한다. 뉴모피즘 같은 스타일 유행의 원리와 한계도 함께 본다.
Frontend › UI Design
나쁜 아이콘과 좋은 아이콘: 아이콘 사용성아이콘은 잘 만들면 텍스트보다 빨리 읽히지만, 의미가 모호하면 퍼즐이 되고 시각적 잡음이 된다. 나쁜 아이콘의 다섯 가지 유형, 아이콘의 비용과 이점, 좋은 아이콘의 조건을 정리했다. 결론은 투자할 여력이 없으면 텍스트 링크가 낫다는 것이다.
Frontend › UI Design
로딩 UI: 스피너, 로딩 애니메이션, 스켈레톤, 프로그레스 바기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.
Frontend › UI Design
모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.
Frontend › UI Design
와이어프레임, 목업, 프로토타입: 충실도에 따른 화면 설계 산출물화면 설계는 정보 구조와 유저 플로우에서 시작해, 구조와 우선순위만 담은 와이어프레임, 실제 생김새를 입힌 정적인 목업, 클릭해 볼 수 있는 프로토타입 순으로 충실도를 높여 가며, 단계마다 답하려는 질문과 버려도 되는 비용이 다르다. 와이어프레임은 클릭되게 만들고, 도구는 공통 요소 관리·화면 전환·리뷰·산출물 기준으로 고른다.
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
UI 밀도: 시각·정보·디자인·시간·가치UI 밀도는 화면에 많이 담는 것이 아니라, 인터페이스가 차지하는 시간과 공간 대비 사용자가 얻는 가치다. 첫인상의 시각 밀도는 믿을 수 없고, 터프티의 데이터-잉크 비율(정보 밀도)과 게슈탈트 원리로 센 디자인 결정의 비율(디자인 밀도)이 더 쓸모 있다. 시간 밀도는 로딩과 대기의 체감(100ms·1초·10초·1분 구간)으로 다루고, 결국 가치 밀도를 최대화하는 것이 목표다.
Frontend › UI Design
UI 요소 용어집: 입력·내비게이션·정보·컨테이너디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.
Frontend › UI Design
UX 라이팅: 원칙, 가이드라인, 체크리스트제품 화면의 문구를 사용자의 목표에 맞춰 쓰는 UX 라이팅. 원칙 → 가이드라인 → 체크리스트로 이어지는 문서 구조와, 문구를 검토하는 8가지 기준(목표 적합성, 모바일, 훑어보기, 이유 먼저, 전문 용어, 다크 패턴, 일관성, 보이스 톤)을 정리했다.
Frontend › Web
결제·주소 폼결제 흐름은 비회원 결제를 기본으로, 단계와 다음 행동을 드러내고, 방해 요소를 걷어 낸다. 카드 칸은 한 칸·inputmode="numeric"·cc-* 토큰·카드 종류 선택 없음, 이름은 한 칸과 유니코드 허용, 주소는 street-address 한 칸이나 address-line1/2, 우편번호는 선택 항목으로 둔다. 나라마다 다른 이름·주소·용어를 받아들이는 국제화 원칙과 enterkeyhint로 단계를 안내하는 법까지 정리한다.
Frontend › Web
더 나은 폼을 만드는 팁폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
Frontend › Web
로그인·가입 폼과 인증 입력가장 좋은 가입 폼은 없는 가입 폼이다. 필요할 때만 계정을 요구하고, 로그인·가입 폼은 비밀번호 관리자가 알아보게 만든다(new/current-password, 다른 name·id, 성공 감지, 붙여넣기 허용). 비밀번호 보기 버튼, 두 단계 로그인, 모바일 키보드 가림, 패스키 자동 완성(username webauthn), 일회용 코드(one-time-code·WebOTP), NIST SP 800-63B-4의 비밀번호 규칙, 계정 설정과 /.well-known/change-password까지 정리한다.
Frontend › Web
브라우저 기본 동작을 존중하기스크롤바·스크롤·선택 강조색·글자 크기·고대비·키보드 포커스·클립보드·방문 기록은 OS와 브라우저가 모든 앱에 같은 방식으로 제공하는 기능이다. 사이트가 이를 바꾸면 외부 일관성이 깨져 일부 사용자가 밀려난다. 덮어쓰지 말고, 필요하면 기본 위에 선택지를 더한다.
Frontend › Web
자동 완성과 autocomplete 토큰브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.
Frontend › Web
폼 스타일링폼 컨트롤은 기본 크기가 작고 브라우저마다 모양이 다르다. 글자 1rem 이상(iOS 확대 방지), 보이는 테두리, 48px 탭 영역, 한 열 배치로 기본을 잡고, appearance: none과 배경 화살표로 select를, 접근성 트리를 지키는 숨김 기법으로 체크박스·라디오를 꾸민다. accent-color, field-sizing: content, 실험 단계의 customizable select(appearance: base-select), pointer 미디어 쿼리와 env()까지 정리한다.
Frontend › Web
PWA 앱 경험 설계와 창 관리설치된 PWA는 브라우저 탭이 아니라 자기 창을 가진다. 200×100px 미니 모드까지 견디는 반응형·점진적 향상의 기초와 오프라인을 기본 상태로 보는 오프라인 우선 원칙(마지막 상태 지키기, 동작 큐, 충돌 해결) 위에, display-mode 미디어 쿼리, 창 제목, 선택·당겨서 새로고침·safe area 같은 앱다운 CSS를 더한다. 스코프 밖 링크가 여는 앱 안 브라우저와 OAuth 흐름, 창 이동·크기·새 창, 제목 표시줄 오버레이, 여러 화면 배치, 화면 꺼짐 방지, 가상 키보드 API까지 정리한다.
Frontend
UI 엔지니어링의 열두 가지 문제UI 엔지니어링의 실력은 라이브러리가 아니라 문제를 아는 데서 나온다. 일관성·반응성·지연·내비게이션·낡은 캐시·엔트로피·우선순위·접근성·국제화·전달·복원력·추상화라는 열두 문제는 툴팁부터 대형 SNS까지 어느 규모에서나 나타나며, 각 문제에 오늘날 쓰는 도구와 함께 정리한다.
Computer Science
그래픽 사용자 인터페이스: WIMP, 메타포, 이벤트 기반 프로그래밍, GUI 툴킷명령을 기억해 입력하는 CLI와 가능한 동작을 화면에 보여 주는 GUI의 차이, 데스크톱 GUI의 공통 구조인 WIMP(창·아이콘·메뉴·포인터)와 데스크톱 메타포, 재사용 부품인 위젯, GUI 프로그램의 실행 모델인 이벤트 기반 프로그래밍, WYSIWYG를 정리하고, Java Swing을 예로 GUI 툴킷의 컴포넌트 트리·레이아웃 관리자·리스너(옵저버)·UI 스레드 하나만 화면을 바꾸는 EDT 규칙을 다룬다.
AI & Data
시각화 설계 과정: 과업 분석, 상호작용, 평가시각화 도구는 사용자가 데이터로 무엇을 하려는지(과업)를 먼저 끌어내고, 스케치와 프로토타입을 반복해 형태를 정하고, 개관 → 확대·필터 → 세부 순서의 상호작용을 붙인 뒤, 사용자가 얻은 통찰(정성)과 통제 실험의 정확도·속도(정량)로 평가한다.
AI & Data
책임 있는 AI: 윤리, 프라이버시·공정성·신뢰AI의 판단은 데이터와 설계자의 선택이 담긴 산출물이라는 관점에서, AI 거버넌스의 세 축인 프라이버시·공정성·신뢰와 투명성을 데이터·지능·UX 세 층에 나눠 무엇을 할지 정리한다. 덜 모으고 PII를 지우고, 데이터 편향(COMPAS, 하위 집단 누락)을 점검하고 신고 경로를 열고, 사용자를 '보정된 신뢰'로 이끌며, 트롤리 딜레마·모럴 머신처럼 정답 없는 판단은 명시하고 공론화한다.
AI & Data
AI 기능의 UX 패턴: 배경형·제한형·개방형AI 기능은 사용자에게 드러나는 정도에 따라 배경형(조용히 기존 경험을 돕는다), 제한형(버튼으로 정해진 작업을 부른다), 개방형(자유 입력)으로 나뉜다. 노출이 클수록 유연하지만 위험도 커진다. 유형별 예와 모범 사례, 둘 중 고르는 기준, 투명성·안내·제어·신뢰 보정·실패 관리 패턴 표를 정리한다.
Career › Product
공감하는 제품 만들기: 경청 세션과 스트레스 케이스공감은 친절이 아니라 상대의 사고 흐름을 이해하는 기술이다. 표면 의견 밑의 이유와 망설임을 듣는 경청 세션 진행법, 엣지 케이스를 스트레스 케이스로 바꿔 보는 관점, 사전 부검으로 해로운 시나리오를 미리 찾는 법을 정리했다.
Career › Product
디자이너와 함께 일하기: 역할·채용·협업그래픽·인터랙션·UX 디자인의 차이, 디자이너를 뽑기 전에 정할 권한과 성공 기준, 서로 다른 관점을 섞는 팀 구성(경쟁가치모형), 디자이너·개발자·고객·브랜드 에이전시가 함께 일하는 원칙을 정리했다.
Career › Product
사용자 리서치: 방법 고르기, 페르소나·시나리오, 사용성 평가더블 다이아몬드의 단계마다 맞는 리서치 방법이 다르다. 사용자를 직접 못 만나면 리뷰·상담 기록·포럼을 쓰고, 조사 결과는 근거 있는 페르소나와 사용 전·중·후 UX 시나리오로 정리해 UX 전략으로 잇는다. 화면은 닐슨의 10가지 휴리스틱 평가와 5명 단위 사용성 테스트로 검증하고, 큰 조직에서는 정기 세션으로 학습 문화를 만든다. 급할수록 맥락·분석 시간·자기 디자인에 대한 애착을 경계하고, 참가자 보호를 위한 윤리 절차를 갖춘다.
Career › Product
상세페이지 9단계 구조상세페이지는 고객이 의심을 하나씩 풀며 구매 버튼까지 스크롤을 내리게 하는 싸움이다. 유입과 전환, 세일즈 퍼널을 바탕으로 판매 증거 → 판매 관리 → 인증 → 메인 이미지 → 문제 → 상세 이미지 → 공감 → 액션 → 상세 정보의 9단계를 고객의 질문 순서로 정리하고, 강점을 위로 올리는 조정법과 표시·광고 규정, 접근성 주의점을 덧붙인다.
Career › Product
콘텐츠 전략과 핵심 모델콘텐츠는 목적·핵심 메시지·다음 궁금증·운영 계획을 갖춰야 전략이 된다. 메인 페이지가 아니라 사업 목표와 사용자 작업이 겹치는 핵심 페이지부터 설계하는 핵심 모델(core model)과 워크숍 진행법을 정리했다.