본문으로 건너뛰기
Neumorphism UI
문서스타일링차트템플릿
—
KO
English한국어简体中文日本語
템플릿 8개

템플릿

예제를 사용해 보고 필요한 화면의 소스를 shadcn으로 설치하세요.

성과 대시보드

선택한 기간과 유입 경로의 매출, 방문 수, 전환율을 확인합니다.

2026-09-17 – 2026-09-30 · 기록된 날짜: 14 / 14

매출
US$60,644.00
방문
23,778
전환 방문
1,210
전환율
5.09%

매출과 목표

일별 매출을 통화로 표시합니다. 점선은 목표입니다.

매출: US$60,644.00 · 목표: US$75,810.00

정확한 데이터 보기
매출과 목표
날짜매출목표
2026-09-17US$3,682.00US$5,064.00
2026-09-18US$3,842.00US$5,118.00
2026-09-19US$4,292.00US$5,172.00
2026-09-20US$4,542.00US$5,226.00
2026-09-21US$3,640.00US$5,280.00
2026-09-22US$4,040.00US$5,334.00
2026-09-23US$4,142.00US$5,388.00
2026-09-24US$4,642.00US$5,442.00
2026-09-25US$4,842.00US$5,496.00
2026-09-26US$3,890.00US$5,550.00
2026-09-27US$4,340.00US$5,604.00
2026-09-28US$4,550.00US$5,658.00
2026-09-29US$5,000.00US$5,712.00
2026-09-30US$5,200.00US$5,766.00

유입 경로 비교

선택 기간의 경로별 합계입니다. 막대는 0에서 시작합니다.

방문: 23,778

정확한 데이터 보기
유입 경로 비교
유입 경로방문전환 방문전환율
Organic9,4703864.08%
Direct8,0114205.24%
Referral6,2974046.42%

방문 전환율

전환 방문 수를 방문 수로 나눕니다. 세로축은 0–100%로 고정합니다.

5.09% · 1,210 / 23,778

정확한 데이터 보기
방문 전환율
날짜방문전환 방문전환율
2026-09-171,557734.69%
2026-09-181,547774.98%
2026-09-191,622865.3%
2026-09-201,612915.65%
2026-09-211,602724.49%
2026-09-221,677804.77%
2026-09-231,667834.98%
2026-09-241,742935.34%
2026-09-251,732975.6%
2026-09-261,722774.47%
2026-09-271,797864.79%
2026-09-281,787915.09%
2026-09-291,8621005.37%
2026-09-301,8521045.62%

누락 날짜는 0이 아닌 빈 구간입니다. 방문이 0인 전환율은 정의되지 않습니다(—).

합계는 제공된 기록만 포함하며 완전성을 보장하지 않습니다. 기간은 제공된 마지막 날짜를 기준으로 합니다.

예시 데이터 · 2026년 9월 · USD. 실제 서비스와 연결되지 않았습니다.

분석 대시보드

기간과 유입 경로별 매출·전환율을 비교하고 원자료를 표나 CSV로 확인합니다.

@neumorphism-ui/template-analytics템플릿 보기

계정 설정

프로필 정보와 알림 수신 설정을 변경합니다.

공개 프로필알림 설정
AL

Alex Kim

alex@example.com

작업 공간의 내 프로필

공개 프로필

팀원이 알아볼 수 있는 이름을 사용하세요.

계정과 작업 공간의 안내를 받습니다.

240자 이내로 나를 소개하세요.

53/240

알림 설정

멘션, 할당 및 중요한 변경을 알립니다.

프로젝트 변경 사항을 주간 요약으로 받습니다.

모든 변경 사항 저장됨

로컬 작동 예제입니다. 새로고침하면 초기화됩니다. 실제 저장은 onSave에 연결하세요.

설정·프로필

프로필과 알림 설정을 편집합니다. 데모의 변경 사항은 새로고침하면 초기화됩니다.

@neumorphism-ui/template-settings템플릿 보기

작업 목록

작업의 제목, 담당자, 상태, 마감일을 관리합니다.

전체 데이터
12
진행 중
6
초안
4

데이터

12 개 검색 결과 · 0 개 선택됨
데이터
상태작업
Archived campaignMina보관됨2026-08-20
Content planningMina초안2026-10-15
Customer onboardingJun진행 중2026-10-08
Keyboard navigation auditJun진행 중2026-10-14
Legacy welcome screenJun보관됨2026-09-01
페이지 1 / 3

최근 변경

이 화면에서 변경한 내용이 표시됩니다.

로컬 작동 예제입니다. 새로고침하면 초기화됩니다. onSave와 onDelete에 실제 서비스를 연결하세요.

데이터 관리

작업을 검색하고 담당자와 마감일을 관리합니다. 데모는 새로고침하면 초기화됩니다.

@neumorphism-ui/template-data-manager템플릿 보기
N

Neumorphism UI

사용 문서, 컴포넌트 예제와 소스 코드를 모았습니다.

링크

5 개 링크

  • 시작하기https://neumorphism-ui.andongmin.com/ko/docs새 탭에서 열림
  • 컴포넌트https://neumorphism-ui.andongmin.com/ko/components새 탭에서 열림
  • GitHubhttps://github.com/andongmin94/neumorphism-ui새 탭에서 열림
  • 문제 신고https://github.com/andongmin94/neumorphism-ui/issues새 탭에서 열림
  • 이메일hello@example.com

연락하기

hello@example.com

이메일은 예제 주소이며 문의를 받지 않습니다.

링크 허브

프로필 아래에 링크를 분류하고 연락처를 복사할 수 있습니다.

@neumorphism-ui/template-link-hub템플릿 보기
Sora Han
선정 작업연락

독립 작업 / 서울

Sora Han

제품 디자이너 · 프런트엔드 개발자

일정 관리, 보고서, 재고 관리 도구를 디자인합니다.

화면 설계부터 인터랙션 시제품과 React 구현까지 작업합니다.

선정 작업

배차 대기 목록제품 디자인 · React2026

아침 근무 전에 변경된 배송 경로에 기사를 배정하는 화면입니다.

문제
경로 변경과 기사 배정이 서로 다른 메시지로 전달됐습니다.
접근
경로, 담당 기사, 미해결 배송지를 같은 행에 배치했습니다.
제공한 결과
대기 목록, 경로 상세, 기사 재배정 폼.
성과
시제품에서는 기사를 선택할 때까지 미배정 경로가 목록에 남습니다.
월말 계정 검토제품 디자인2025

계정별 합계 옆에서 원본 거래 내역을 확인하는 월간 보고서입니다.

문제
설명되지 않은 잔액을 확인하려면 보고서를 벗어나야 했습니다.
접근
계정 행과 거래 내역을 연결하고 비교 기간을 표시했습니다.
제공한 결과
계정 표, 기간 선택, 거래 상세.
성과
시제품에서 합계에 포함된 거래와 검토가 필요한 항목을 구별할 수 있습니다.
공용 장비 목록웹 디자인 · React2025

카메라, 마이크, 조명의 대여 가능 여부를 검색하는 목록입니다.

문제
대여 현황과 장비 목록이 별도 문서에 기록돼 있었습니다.
접근
각 장비 옆에 대여 상태를 표시하고 용도별로 분류했습니다.
제공한 결과
장비 목록, 분류 필터, 장비 상세.
성과
시제품에서 대여 가능한 장비와 사용 중인 장비를 구별할 수 있습니다.

연락

이메일

© 2026 Sora Han

맨 위로

이 예제의 인물과 프로젝트는 가상의 사례입니다.

포트폴리오

프로필, 프로젝트별 설명, 연락처를 함께 보여 줍니다.

@neumorphism-ui/template-portfolio템플릿 보기

최근 글

실제 작업에서 얻은 제품·디자인·프런트엔드 메모를 모아봅니다.

3 개 글

  1. 2026-09-18제품 · 4 분

    저장 실패 후 초안 복구하기

    수정한 제목과 본문을 유지하고 오류를 표시한 뒤 저장을 다시 시도합니다.

  2. 2026-09-10개발 · 6 분

    대화상자를 닫은 뒤 키보드 포커스 돌려주기

    Escape와 닫기 동작을 확인하고 대화상자를 연 버튼으로 포커스를 돌려줍니다.

  3. 2026-08-29디자인 · 5 분

    작은 컨트롤의 아이콘 정렬하기

    작은 버튼, 메뉴 표시, 펼침 컨트롤에 같은 크기의 아이콘 영역을 사용합니다.

블로그 아카이브

제목이나 주제로 글을 찾고 날짜순으로 정렬합니다.

@neumorphism-ui/template-blog템플릿 보기
모든 글

개발

저장에 실패해도 초안은 유지하기

저장 요청이 실패했을 때 편집기에 남아 있어야 하는 내용입니다.

2026년 9월 12일·4분 읽기

저장에 실패했다고 방금 고친 제목, 요약, 본문까지 사라져서는 안 됩니다. 입력한 초안은 폼에 남기고 저장 버튼 근처에 오류를 표시합니다.

초안과 저장된 사본 구분하기

편집기를 열면 저장된 글을 불러오고, 수정할 초안을 별도로 둡니다. 입력은 초안만 바꾸며 글을 저장된 상태로 표시하지 않습니다.

저장 콜백이 성공한 뒤에만 저장된 사본을 교체합니다. 요청이 실패하면 초안과 이전 사본을 모두 유지합니다.

다시 입력하지 않고 재시도하기

요청이 실패한 뒤에도 작성자는 항목을 고치거나 같은 초안으로 저장을 다시 시도할 수 있어야 합니다.

  • 입력란을 비우지 않고 저장 오류를 표시합니다.
  • 요청이 끝나면 저장 버튼을 다시 사용할 수 있게 합니다.
  • 저장하지 않은 초안을 버리기 전에 확인을 받습니다.
모든 글맨 위로

블로그 글 상세

요약, 발행 정보, 소제목이 있는 글 상세 화면입니다.

@neumorphism-ui/template-blog-post템플릿 보기

글 관리

초안을 편집하고 미리보기로 확인한 뒤 저장하세요.

전체 글
3
게시됨
2
저장 안 됨
0

글 편집

업데이트 2026-09-18

미리보기
게시됨

9월 편집기 업데이트

초안 복구와 글 검토 체크리스트.

저장에 실패해도 현재 초안을 유지합니다. 제목과 본문을 다시 입력하지 않고 요청을 재시도할 수 있습니다.

데모는 새로고침하면 초기화됩니다. 실제 저장은 onSave에 연결하세요.

로컬 CMS

초안을 편집하고 미리보기와 저장을 사용해 보세요. 데모는 새로고침하면 초기화됩니다.

@neumorphism-ui/template-cms템플릿 보기
Neumorphism UI56 UI · 16 blocks · 80 registry items

shadcn 호환 소스 Registry

GitHubCredits