표면에서 살짝 솟아오른 버튼 · Neumorphism

재질 · 배경과 비슷한 표면에 밝고 어두운 그림자를 주어 돌출·함몰을 표현

조회 0추천 0

직접 만든 예시

[설정 패널]에 neumorphism을 적용해줘. 배경과 같은 계열의 표면에 양방향 그림자로 돌출과 눌림을 표현해줘. 버튼 경계·포커스·선택 상태는 그림자 없이도 구별되게 해줘.

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

입력과 결과 비교

설명용 예시

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

Neumorphism · 뉴모피즘의 특징을 적용한 시각적 변형. 문구와 기능은 같고 색·재질·배치를 비교합니다.

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

말랑하게 솟아 있는 표면을 요청하는 용어입니다. 그림자만으로 조작 대상을 구분하면 알아보기 어려울 수 있어 경계와 상태도 지정합니다.

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

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

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

Neumorphism · 뉴모피즘은 배경과 비슷한 표면에 밝고 어두운 그림자를 주어 돌출·함몰을 표현입니다. 이 키워드는 재질을 지정하는 데 씁니다.

복사할 문구

[설정 패널]에 neumorphism을 적용해줘. 배경과 같은 계열의 표면에 양방향 그림자로 돌출과 눌림을 표현해줘. 버튼 경계·포커스·선택 상태는 그림자 없이도 구별되게 해줘.

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

말랑하게 솟아 있는 표면을 요청하는 용어입니다. 그림자만으로 조작 대상을 구분하면 알아보기 어려울 수 있어 경계와 상태도 지정합니다.

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

확인일: 2026-10-18