다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

글래스 모피즘이란?

글래스 모피즘은 반투명한 유리를 댄듯한 효과를 주고, 투명도를 강조하기 위해 배경에 비비드한 컬러를 사용하는 디자인입니다. 덕분에 우리가 볼 때는 불투명한 유리를 댄 것 같은 느낌을 받을 수 있는데요. 주요 특징은 아래와 같습니다. 

 

  • 투명도(Background blur)를 사용한 불투명한 유리 효과
  • 공간에 물체가 떠있는 듯한 레이어
  • 불투명을 강조하기 위한 선명한 색상
  • 불투명한 오브젝트 내 연한 테두리

 

이미지 출처: uxdesign.cc

 

글래스 모피즘을 다룰 때 두 가지 요소를 고려해야 합니다. 첫 번째는 투명도입니다. 대상이 우리 눈과 가까울수록 많은 빛을 받아 앞에 있는 요소일수록 더 투명해야 합니다. 두 번째는 배경입니다. 예제를 보면 비비드한 색이 돋보이는 흐릿한 사진을 배경으로 활용하는 경우가 많아요. 아무래도 톤의 차이가 분명해야 투명 레이어가 더 눈에 띌 수 있기 때문입니다.

 

이런 글래스 모피즘 디자인을 적용하는 방법은 여러 가지가 있는데요. 대표적인 것은 우리가 자주 사용하는 프로토타이핑 툴을 활용하는 방법입니다. 그리고 또 하나는 글래스 모피즘에 최적화된 별도의 툴을 활용하는 방법이에요. '뉴모피즘, 글래스모피즘을 쉽게 생성할 수 있는 웹서비스 : Toolbox지난 6월 뉴모피즘과 글래스 모피즘 디자인을 쉽게 생성할 수 있는 웹 서비스를 소개한 적 있는데요. 오늘은 글래스 모피즘에 더 초점이 맞춰진 툴을 소개하고자 합니다.

 

 

글래스 모피즘 CSS 생성 서비스: Glass UI

편집 화면은 어렵지 않게 구성되어 있어요. 이미지, 배경 타입, 컬러, 투명도 등 필요한 조건을 원하는 값으로 선택하면 디자인된 모습과 CSS 내용을 바로 확인할 수 있습니다. 

 

  1. 배경 이미지를 URL로 등록, 확인 가능
  2. 백그라운드 타입 선택 가능 (이미지, 단색, 그라데이션 배경)
  3. 배경에 적용된 디자인 컬러 변경 가능
  4. 블러 강도를 선택할 수 있음
  5. 투명도 강도를 선택할 수 있음
  6. 채도 강도를 선택할 수 있음
  7. 카드 디자인 종류를 선택할 수 있음 (멤버 리스트, 프로필, 가격, 상품, 로그인)
  8. CSS, HTML 내용을 확인할 수 있음

 

Glass UI의 가장 큰 장점은 쉽게 글래스 모피즘 적용 모습을 확인할 수 있다는 점입니다. 기획 업무를 하는 제가 쉽게 적응, 짧은 시간 내 글래스 모피즘에 해당하는 디자인 사례를 여럿 확인할 수 있었던 건 화면을 이동하거나 별도 학습 시간을 필요로 하지 않은 쉬운 구성 덕분이었습니다. 

 

또, 다양한 조건 내 여러 조합이 가능하다는 점도 매력적입니다. 앞서 8가지 주요 조건과 기능을 살펴봤던 것처럼, 한 가지 카드 디자인 구성이 아니라 자주 쓰이는 다섯 가지 디자인을 불러올 수 있는 것은 물론 배경 역시 이미지와 단색, 그라데이션 등 조건 선택이 가능해 우리가 만들고자 하는 서비스와 잘 어울리는 디자인을 빠르게 확인해볼 수 있습니다. 

 

컬러, 투명도, 블러 등 선택한 조건에 따라 이미지로 최종 확인이 가능한 것이 아니라 CSS, HTML 등 바로 사용 가능한 결과를 별도 제공해주는 점도 좋습니다. 물론, 일부 수정은 필요하겠지만 직접 입력할 필요 없이 선택한 조건에 따른 CSS 생성이 가능하니, 기본적인 컨셉을 웹상에 직접 적용해 확인할 수 있다는 점에서 꽤 유용하게 다가옵니다.

 

디자인 작업 시, 상대적으로 시간이 걸릴 수밖에 없는 기존 툴 대신 기본적인 컨셉을 확인하고 적용 시 어떤 모습일지 미리 보는 용도로 'Glass UI'를 사용할 수 있을 거라 생각합니다. 서비스에 대한 더 자세한 내용은 '이곳'을 통해 확인해주세요!

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.