디자인 스타일
글래스모피즘(Glassmorphism)
글래스모피즘(Glassmorphism)은 배경이 흐릿하게 비치는 반투명 패널로 레이어와 깊이를 표현하는 UI 스타일입니다.
쉬운 설명
반투명한 표면과 배경 블러로 서리 낀 유리 같은 깊이를 만드는 스타일.
Visual sample
눈으로 보면 이렇습니다
오로라 배경 위에 반투명 패널과 블러를 적용한 글래스모피즘 샘플
- 반투명 패널
- 배경 블러
- 얇은 밝은 테두리
Restrained glassmorphism, frosted panels, ambient aurora background, subtle white borders, accessible text contrast Style variations
같은 스타일도 이렇게 달라집니다
같은 유리 표현도 배경의 밝기, 패널의 불투명도와 색 번짐의 정도에 따라 차분한 제품 UI부터 강한 미래적 화면까지 달라집니다.다크 오로라 글래스
어두운 배경의 색 번짐 위에 반투명 패널을 겹쳐 깊이와 미래적인 분위기를 만듭니다.
Dark aurora glassmorphism, frosted navy panels, mint glow, thin translucent borders, high-contrast white text 라이트 프로스트 글래스
밝은 하늘색 배경과 높은 패널 불투명도로 차분하고 가벼운 생산성 도구의 인상을 냅니다.
Light frosted glass UI, pale blue ambient background, milky panels, subtle border highlights, dark readable text 홀로그램 글래스
보라와 분홍의 강한 빛을 제한된 영역에 사용해 음악·AI 제품처럼 몰입감 있는 화면을 만듭니다.
Holographic glassmorphism, violet base, restrained pink spectral glow, layered translucent panels, crisp typography Visual DNA
스타일을 만드는 구체적인 요소
단어 하나보다 아래 요소를 함께 지정해야 AI가 더 일관된 결과를 만듭니다.선과 테두리
1px · 20–45% White패널 가장자리에 얇은 반투명 흰색 선을 사용해 유리의 두께와 빛 반사를 암시합니다.
모서리
12–24px중간 이상의 둥근 모서리가 부드러운 표면과 잘 맞습니다. 작은 컨트롤까지 모두 크게 둥글리지는 않습니다.
컬러 톤
Dark base + Glow짙은 남색이나 밝은 안개색을 바탕으로 민트, 보라, 분홍의 빛을 2개 이내로 겹칩니다.
타이포그래피
Sans · 500–700장식이 많은 배경에서도 읽히도록 구조가 단순한 산세리프와 충분한 굵기를 사용합니다.
아이콘
얇은 Line · 1.5–2px단순한 선 아이콘을 밝은 단색으로 사용합니다. 발광 효과는 선택 상태처럼 꼭 필요한 곳에만 둡니다.
그림자
24–60px · Soft넓고 어두운 그림자로 패널이 배경에서 떠 있는 깊이를 만듭니다. 그림자보다 블러와 테두리가 먼저입니다.
간격과 밀도
20–40px · Layered패널 사이에는 배경이 보일 간격을 확보하고 한 패널 안의 정보는 단순하게 유지합니다.
모션
180–300ms · Floatopacity와 작은 이동, 빛의 명암 변화로 층이 반응하는 느낌을 냅니다. 배경 전체를 계속 움직이지 않습니다.
Where it works
어떤 프로젝트에 잘 어울리나요?
스타일의 강도는 제품의 목적과 사용자가 읽어야 하는 정보량에 맞춰 조절해야 합니다.적극적으로 추천
빛과 레이어가 미래적인 인상을 주고 플레이어나 생성 결과 같은 핵심 패널을 강조하기 좋습니다.
앨범 아트와 배경색을 은은하게 비춰 몰입감 있는 탐색 경험을 만들 수 있습니다.
요약 카드와 모달의 층위를 배경과 자연스럽게 구분할 수 있습니다.
강도를 조절해서 적용
내비게이션, 모달과 핵심 요약 패널에만 적용하고 긴 본문 영역은 불투명하게 유지하는 편이 좋습니다.
여러 반투명 행이 겹치면 대비와 스캔 속도가 크게 떨어지므로 본문 표면에는 적합하지 않습니다.
backdrop-filter와 큰 블러를 반복하면 렌더링 비용이 커질 수 있어 정적 대체 배경이 필요합니다.
Compare
비슷한 스타일과 무엇이 다른가요?
둘 다 부드러운 깊이를 사용하지만, 글래스모피즘은 뒤가 비치는 투명한 레이어이고 뉴모피즘은 같은 바탕에서 눌리거나 솟은 불투명 표면입니다.글래스모피즘(Glassmorphism)
- 배경이 비치는 반투명 패널
- backdrop blur와 밝은 가장자리
- 서로 겹치는 레이어로 깊이 표현
Neumorphism
- 배경과 같은 색의 불투명 표면
- 밝고 어두운 양방향 그림자
- 눌림과 돌출로 물리적 깊이 표현
Prompt recipe
AI에게 요청할 때는 이렇게 조합하세요
Restrained glassmorphism, frosted panels, ambient aurora background, subtle white borders, accessible text contrast. Use 14–22px panel radii, 1px translucent white borders, controlled backdrop blur, simple line icons, and text surfaces that meet accessible contrast; avoid stacking glass on glass, low-opacity body text, and continuous animated gradients. Final check
완성 전에 확인하세요
- 01
패널 뒤의 색과 형태가 블러를 통해 적당히 느껴지는가?
- 02
모든 본문 텍스트가 배경 변화와 관계없이 충분히 읽히는가?
- 03
얇은 밝은 테두리가 패널의 경계를 분명히 만드는가?
- 04
반투명 패널 안에 또 다른 반투명 카드를 과도하게 넣지 않았는가?
- 05
backdrop-filter가 없을 때도 사용할 수 있는 불투명 대체색이 있는가?
- 06
모바일에서 큰 블러와 그림자가 스크롤 성능을 해치지 않는가?
Explore more
다른 스타일도 보러 가기
작은 미리보기로 분위기를 비교하고 다음 디자인 용어로 이어가세요.관계 지도
