–
오늘 소개할 서비스는 ‘CSS GUI’입니다. 그라데이션, 플레이스 홀더, 이메일 및 이름 입력, 날짜 및 파일 선택, 버튼, 이미지 구성, 프로그레스 바 등 기본적인 컴포넌트를 제공해 누구나 쉽게 원하는 스타일에 맞게 편집해 활용할 수 있도록 도와주는 곳입니다.
‘CSS GUI’의 기본 화면 구성입니다. 왼쪽으로는 스타일 에디터가 제공되며 오른쪽에는 컴포넌트를 종류에 따라 확인할 수 있어요. 원하는 컴포넌트를 클릭하면 그에 맞는 에디터를 활용할 수 있고, 완성된 내용은 내보내기를 통해 바로 적용할 수 있습니다.
제공되는 컴포넌트의 모습입니다. 서비스에서 일반적으로 자주 활용하는 컴포넌트가 모여있는 것을 알 수 있습니다. 서비스를 처음부터 구성해야 하거나, 빠르게 작업해야 하는 경우 직접 구성하기보다 이렇게 제공되는 것 중 스타일을 조금씩 바꿔 활용하는 것도 좋은 방법이기에 더 유용하게 다가옵니다.
여러 컴포넌트 중 하나를 선택하면, 편집 가능한 내용을 왼쪽으로 확인할 수 있습니다. 앞서 말씀드린 것처럼, 각 컴포넌트에 해당하는 기본 스타일이 이미 적용되어 있기에 입맛에 따라 내용을 변경하는 작업이 어렵게 느껴지지 않습니다. 코딩이 필요 없다는 이들의 소개처럼 처음부터 작업할 필요 없이 살짝 숟가락만 얹으면 되는 구성이에요.
무엇보다 웹서비스에서 자주 사용되는 컴포넌트가 대부분 등록되어 있다는 점이 매력적입니다. 버튼의 종류도 여러 개며 텍스트 사이즈나 종류도 다양하게 제공됩니다. 클릭, 수정, 내보내기 (또는 복사)의 단계로 손쉽게 원하는 컴포넌트를 활용할 수 있다는 점이 가장 큰 장점입니다.
체크박스와 라디오버튼 등도 지원하기에 초기 버전의 서비스에 활용할 컴포넌트를 고민중이라면, 좋은 선택지가 되지 않을까 싶습니다. 더 자세한 내용은 ‘링크’를 통해 확인해주세요!
- 종류에 따른 CSS 로딩 애니메이션을 살펴볼 수 있는 곳! : Whirl
- 주요 서비스에서 사용 되는 다양한 버튼 사례 확인이 가능한 : Copy & Paste CSS
- 24개 로딩애니메이션을 소스와 함께 제공해주는 곳!
–