#ui

Frontend › CSS

끝에서 처음으로 자연스럽게 이어지는 캐러셀을 만드는 기법. 양끝에 복제 슬라이드를 붙이고 transitionend에서 전환 없이 제자리로 점프하는 버튼형 캐러셀, 애니메이션 중 연속 클릭 잠금, 페이지 단위 이동, 목록을 두 번 이어 붙여 translateX(-50%)로 흘리는 CSS 마키, @keyframes 퍼센트로 멈춤 구간을 만드는 자동 슬라이드, 가장자리 페이드와 움직임 줄이기까지.

• #css
• #animation
• #javascript
• #frontend

Frontend › Mobile

Flutter 앱을 만들다 자주 부딪히는 네 가지 화면 문제의 해법. 화면 일부만 전환하는 중첩 Navigator, 기본 위젯으로 안 되는 모양을 그리는 CustomPaint와 Path, 한 문장 안에 여러 스타일을 섞는 Text.rich, 앱 시작 때의 흰 화면을 없애는 네이티브 스플래시를 정리한다.

• #mobile
• #flutter
• #navigation

Frontend

디자인 시스템과 핸드오프, 레이아웃, 전자상거래·제스처 UI 패턴, UX 라이팅까지 화면의 생김새와 쓰임새를 다루는 노트 모음.

• #frontend
• #design-system
• #accessibility

Frontend › UI Design

아이콘은 잘 만들면 텍스트보다 빨리 읽히지만, 의미가 모호하면 퍼즐이 되고 시각적 잡음이 된다. 나쁜 아이콘의 다섯 가지 유형, 아이콘의 비용과 이점, 좋은 아이콘의 조건을 정리했다. 결론은 투자할 여력이 없으면 텍스트 링크가 낫다는 것이다.

• #ux
• #design
• #design-principles
• #icon

Frontend › UI Design

기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.

• #frontend
• #ux
• #animation
• #accessibility

Frontend › UI Design

화면 설계는 정보 구조와 유저 플로우에서 시작해, 구조와 우선순위만 담은 와이어프레임, 실제 생김새를 입힌 정적인 목업, 클릭해 볼 수 있는 프로토타입 순으로 충실도를 높여 가며, 단계마다 답하려는 질문과 버려도 되는 비용이 다르다. 와이어프레임은 클릭되게 만들고, 도구는 공통 요소 관리·화면 전환·리뷰·산출물 기준으로 고른다.

• #ux
• #design
• #prototype
• #product

Frontend › UI Design

사용성은 사람의 지각·인지 특성에 맞출 때 생긴다. 순서 있는 값은 밝기로·범주는 색상으로 보여 주는 지각 원리, 청킹, 어포던스, 재인과 회상, 초보자와 숙련자를 위한 여러 경로, 감성 컴퓨팅, 컴퓨터 매개 소통과 시선, 의인화와 불쾌한 골짜기, 그리고 설계가 사람에게 미치는 영향의 윤리를 정리한다.

• #ux
• #design-principles
• #accessibility
• #design

Frontend › UI Design

디자인 시스템을 범용 UI 라이브러리가 아니라 회사의 디자인 결정을 관리하는 제품 언어로 보는 관점을 정리한다. 결정을 값·의도·맥락으로 인코딩하는 디자인 토큰과 섣부른 시맨틱 토큰의 함정, 아토믹 단위가 하나로 정해지지 않는 이유와 컴포넌트를 기능(구조·상태·상호작용·맥락)과 형태(구조·시각 옵션·상태 옵션·디자인 결정)로 해부하기, 상태 압축, 공통 인터페이스로 디자인-개발의 순환 참조 끊기, 사전 조합 컴포넌트와 조합 가능한 패키지를 나눠 일관성과 유연성을 함께 주는 API를 다룬다.

• #frontend
• #design-system
• #react
• #css
• #accessibility

Frontend › UI Design

UI 밀도는 화면에 많이 담는 것이 아니라, 인터페이스가 차지하는 시간과 공간 대비 사용자가 얻는 가치다. 첫인상의 시각 밀도는 믿을 수 없고, 터프티의 데이터-잉크 비율(정보 밀도)과 게슈탈트 원리로 센 디자인 결정의 비율(디자인 밀도)이 더 쓸모 있다. 시간 밀도는 로딩과 대기의 체감(100ms·1초·10초·1분 구간)으로 다루고, 결국 가치 밀도를 최대화하는 것이 목표다.

• #ux
• #design
• #performance
• #data-visualization

Frontend › UI Design

디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.

• #frontend
• #ux
• #design
• #html

Computer Science

명령을 기억해 입력하는 CLI와 가능한 동작을 화면에 보여 주는 GUI의 차이, 데스크톱 GUI의 공통 구조인 WIMP(창·아이콘·메뉴·포인터)와 데스크톱 메타포, 재사용 부품인 위젯, GUI 프로그램의 실행 모델인 이벤트 기반 프로그래밍, WYSIWYG를 정리하고, Java Swing을 예로 GUI 툴킷의 컴포넌트 트리·레이아웃 관리자·리스너(옵저버)·UI 스레드 하나만 화면을 바꾸는 EDT 규칙을 다룬다.

• #computer-science
• #ux
• #event
• #cli
• #java