–
그동안 저의 필요에 의해 컬러 조합이나 그라데이션 제작 등의 서비스를 자주 소개했어요. 실제 많은 도움을 받기도 했는데요! 오늘은 웹페이지에 제작 시 많은 도움이 되는, 12개 기능을 한 곳에서 사용할 수 있는 서비스를 정리하고자 합니다.
‘Omatsuri’에서 사용 가능한 기능 12개는 아래와 같아요.
- Triangle generator
- Color shades generator
- Gradient generator
- Page dividers
- SVG compressor
- SVG -> JSX
- Base64 encoding
- Fake data generator
- Symbols collection
- Lorem ipsum
- CSS cursors
- Keyboard events codes
컬러 조합과 그라데이션 생성은 개별 서비스로 자주 접했지만, 삼각형을 만들거나 더미 데이터 생성, 로렘 입숨 등을 한 곳에서 활용할 수 있다는 점은 ‘Omatsuri’만의 가장 큰 장점이라고 생각해요. 그럼 12개 기능 중 몇 가지를 더 자세히 들여다볼게요.
–
(1) 컬러 조합 생성
먼저, 기본적이지만 활용도가 높은 ‘컬러 조합’ 입니다. 우리가 입력한 컬러값을 바탕으로 유사한 컬러와 그림자가 반영된 컬러를 확인할 수 있어요. 랜덤으로 생성, 전체 컬러를 복사해 활용할 수도 있고, 컬러의 밝기와 채도 등을 간단히 적용할 수 있어 더욱 유용하게 느껴집니다.
(2) 삼각형 생성
다음은 ‘간단한 삼각형’을 만들 수 있는 기능입니다. 화살표의 방향과 사이즈, 길이와 높이 그리고 컬러를 지정해 입맛대로 구성할 수 있어요. 완성된 화살표는 각각 css, scss, jss 등으로 확인, 복사해 활용할 수 있습니다.
(3) 가짜 데이터 생성
테스트나 화면 구성을 위한 ‘가짜 데이터’는 잊을만한면 한 번씩 다시 만들게 됩니다. 이름이나 이메일 등은 임의로 여러개를 만들기 어려워 저도 예전부터 생성한 데이터를 재활용하고 있는데요. 이곳에서는 이름, 이메일, 프로필(아바타)이미지, 사용자명, 비밀번호, 주소와 우편번호, 거주도시 등 넓은 범위의 데이터를 생성해 활용할 수 있습니다. 오른쪽 상단의 ‘Regenerate’ 버튼을 클릭하면 끊임없이 새로운 데이터를 만들어주기에 이메일 주소등을 모을 때 유용하게 활용할 수 있어요.
(4) 로렘 입숨 생성
특정 화면 등에 필요한 ‘문구’를 직접 작성하지 않고, 임의로 생성해 활용할 수 있도록 도와주는 로렘 입숨 생성기도 포함되어 있어요. 문장 수를 설정할 수 있고, 3가지 컨셉에 해당하는 문구를 확인할 수 있습니다. 로렘 입숨 관련 서비스는 아래 리스트를 함께 확인해보세요!
(5) 그라데이션 생성
그라데이션을 모양, 적용 컬러에 따라 확인할 수 있는 기능도 제공됩니다. 기본 2개 컬러가 설정되어 있으며 원하는 컬러를 추가해 구성할 수 있어요. 완성된 그라데이션은 CSS, JavaScript 등으로 제공되어 복사해 활용할 수 있습니다. 이미 완성된 그라데이션을 확인할 수 있는 별도 갤러리도 제공되어 직접 생성이 어려울 경우 도움을 받을 수 있어요.
그 외에도 간단하지만 한 번씩 필요한 기능을 다양하게 제공하고 있으니 더 자세한 내용은 ‘이곳’을 통해 확인해주세요!
–
함께 활용해보세요!
–
