어두운 바탕에 또렷한 정보 · Dark mode UI

색상 체계 · 어두운 배경을 기준으로 표면·본문·강조색의 명도를 조정하는 화면

조회 0추천 0

직접 만든 예시

[서비스 첫 화면]을 dark mode UI로 디자인해줘. 배경·카드·오버레이의 명도를 구분하고 본문과 보조 글자의 대비를 확보해줘. 강조색은 주요 CTA와 선택 상태에 집중해줘.

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 같은 기록 서비스의 소개 문구·기능 3개·CTA

Dark mode UI · 다크 모드 UI의 특징을 적용한 시각적 변형. 문구와 기능은 같고 색·재질·배치를 비교합니다.

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

단순한 검은 배경에서 더 나아가 어두운 화면의 계층을 요청합니다. 다크 모드는 색상 체계이므로 벤토나 미니멀리즘과 함께 쓸 수 있습니다.

첨부 영상에서 확인한 키워드입니다. 프롬프트와 예시는 직접 제작했으며 링크는 기법 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

Dark mode UI · 다크 모드 UI은 어두운 배경을 기준으로 표면·본문·강조색의 명도를 조정하는 화면입니다. 이 키워드는 색상 체계를 지정하는 데 씁니다.

복사할 문구

[서비스 첫 화면]을 dark mode UI로 디자인해줘. 배경·카드·오버레이의 명도를 구분하고 본문과 보조 글자의 대비를 확보해줘. 강조색은 주요 CTA와 선택 상태에 집중해줘.

가상의 기록 서비스에 같은 제목·기능·CTA를 두고 스타일을 바꿨습니다. 색상, 글자의 크기, 표면, 배치의 차이를 살펴보세요. 다른 스타일은 화면 위 선택창에서 바꿀 수 있습니다.

단순한 검은 배경에서 더 나아가 어두운 화면의 계층을 요청합니다. 다크 모드는 색상 체계이므로 벤토나 미니멀리즘과 함께 쓸 수 있습니다.

이 화면은 직접 만든 해석 예시이며, 해당 스타일의 유일한 정답이나 특정 모델의 성능 비교 결과는 아닙니다. 입체 화면은 CSS 3D, 메시 배경은 CSS 그라디언트로 구현했습니다.

확인일: 2026-10-18