듀오랩스 UI 패턴 컬렉션

리소스 이름을 그대로 입력해야 삭제 버튼이 열리는 확인 창이다. 지워지면 무엇이 함께 끊기는지 먼저 보여주고, 입력이 다르면 무엇이 다른지 그 자리에서 알려 준다.

앱을 처음 열었을 때 로그인 수단을 고르는 전체 화면 다이얼로그. 주 제공자 버튼과 보조 제공자 아이콘, 브라우저 인증 대기, 로그인 없이 시작했을 때 못 쓰는 기능까지 한 화면에서 이어서 보여준다.

Git 저장소 연결, 예제, 템플릿, 정적 파일 중에서 프로젝트 시작 방법을 고른다. 파일 선택 창과 드래그 앤 드롭 상태를 함께 제공한다.

왼쪽 기능 설명을 선택하면 오른쪽 파일 이름과 코드 예시가 함께 바뀐다. 방향키로 기능을 이동하고 현재 코드를 복사할 수 있다.

설정마다 켜고 끄기, 값 선택, 상위 요금제 안내 중 맞는 조작을 오른쪽에 둔다. 물음표 버튼으로 설명을 펼치고 방금 바꾼 값도 함께 표시한다.

로고와 한 줄 설명을 담은 카드를 3칸으로 늘어놓고 한 곳을 선택한다. 이름으로 걸러 보고, 이미 연결한 곳은 연결됨 상태로 구분한다.

OpenStreetMap 타일 위에 지역별 값을 넓이가 비례하는 원으로 표시한다. 지도를 끌어 이동하고 확대·축소하며, 목록에서 지역을 고르면 해당 위치로 이동한다.

이메일과 비밀번호를 확인해 입력 오류를 알려 주고, 비밀번호 표시 전환과 간편 로그인 수단을 함께 제공한다. 이 기기에 저장한 계정 목록에서 이메일을 채워 넣을 수 있다.

24시간·7일·30일 기간을 전환하면 지표별 추이 카드가 함께 갱신된다. 한 시점을 고르면 모든 카드가 같은 시점의 값을 보여준다.

메뉴 이름을 검색해 하위 항목까지 걸러 내고, 섹션을 펼쳐 원하는 화면으로 이동한다. 최근 본 항목, 신규·베타 배지, 준비 중 항목을 함께 표시한다.

면적 크기로 상위 조직의 인원 비중을 비교하고 영역을 선택해 하위 팀으로 들어간다. 계층이 바뀌어도 상위 조직의 색과 정확한 값을 유지한다.

시계열 표본을 평균과 관리 상·하한에 놓고 한계 이탈과 같은 방향의 긴 흐름을 표시한다. 개별 표본을 선택해 평균 차이와 규칙 위반 여부를 확인한다.

단계별 중앙값, 사분위 범위, 전체 범위와 이상치를 한 축에 표시한다. 완료 시간과 만족도를 전환해 평균만으로 보이지 않는 편차를 비교한다.

네 선택지를 속도, 정확도, 안정성, 확장성, 비용 효율 축에 연결한다. 계열을 숨기거나 강조해 여러 기준 사이의 장단점을 비교한다.

열 너비로 시장 규모를, 내부 높이로 매출 유형 비율을 나타낸다. 두 차원의 부분·전체 관계를 한 면적에서 비교하고 시장별 구성을 선택해 확인한다.

여러 지표의 실제 값, 목표선, 성과 구간을 얇은 가로축에 정렬한다. 목표 차이순으로 정렬해 부족한 지표와 달성한 지표를 빠르게 찾는다.

중립을 중심으로 반대와 동의 응답을 양쪽에 배치해 문항별 태도 분포를 비교한다. 전체와 제품팀을 전환하고 순동의 지수를 함께 읽는다.

여섯 채널의 시계열을 작은 차트로 나눠 공통 축 또는 개별 축으로 비교한다. 이전 기간을 겹쳐 보고 선택한 채널의 최근 값과 변화폭을 확인한다.

평소에는 시작일과 종료일만 한 줄로 보여주고, 누르면 두 달 달력을 펼쳐 기간을 고른다. 조회할 수 없는 날짜는 취소선으로 구분하고 방향키로도 날짜를 옮긴다.

접두어를 입력하면 도메인, 문서, 구성원처럼 정해진 범위 안에서만 검색한다. 처음에는 최근 항목과 접두어 안내를 보여주고 방향키와 Enter로 결과를 고른다.

하나의 패드에서 선명도와 흐름을 동시에 조절하고 합성 결과를 바로 확인한다. 드래그, 방향키, 범위 입력을 같은 값에 연결한다.

좌우 작업 패널 사이의 분할선을 드래그하거나 방향키로 조절한다. 최소·최대 너비와 비율 프리셋을 적용해 편집 화면의 안전한 크기 변경을 보여준다.

빈 공간을 드래그해 여러 항목을 사각 영역으로 선택한다. 개별 버튼과 키보드 선택 목록을 함께 제공해 포인터가 없어도 같은 결과를 만들 수 있다.

초안·검토·승인 상태 사이를 직접 이동하고 최근 전환 기록을 확인한다. 상태의 위치와 설명, 다음 행동을 하나의 인터랙티브 지도로 연결한다.

베지어 경로의 폭과 높이, 재생 시간을 조정하며 카드가 곡선을 따라 이동하고 회전하는 흐름을 만든다. 경로와 제어점을 한 화면에서 함께 확인한다.

하나의 카드가 수집·검토·완료 위치를 이동할 때 지속 시간과 완화 곡선을 바꿔 본다. 위치, 크기, 상태색이 같은 전환 규칙으로 이어진다.

SVG 난류로 타이포와 도형의 좌표를 흔들고 스캔라인을 통과시킨다. 노이즈 주파수와 변위 강도를 조정해 신호가 끊기는 듯한 포스터를 만든다.

SVG 면을 여러 높이로 겹쳐 산과 나무를 종이로 잘라 놓은 듯 표현한다. 레이어 간격, 빛 방향, 색 조합을 바꾸며 깊이와 그림자를 조절한다.

사인파의 높이를 ASCII 문자의 밀도와 명도로 번역해 입체 격자를 만든다. 문자 집합, 깊이, 속도를 바꾸고 재생을 멈춰 현재 형태를 읽을 수 있다.

포인터를 따라 움직이는 유리판이 배경을 흐리고 파랑·분홍 색 채널을 가장자리에서 분리한다. 흐림과 색 분리 강도를 조절해 재질의 두께를 바꾼다.