디자인이나 기획 업무를 하면서, 금방 만들어 테스트 하고 싶은데 활용 중인 툴로는 시간이 걸릴 수 밖에 없는 것들이 몇몇 존재합니다. 테스트 성격이 짙은데, 괜히 한 번 더 들여다보게 되고 작업을 더 하려다 보니 시간이 걸리는 경우도 있고요. 그래서 오늘은 웹상에서 유용하게, 바로바로 활용할 수 있는 서비스들을 하나씩 소개해볼까 합니다. 

 

1.Online CSS Button Generator

 

 

먼저 웹상에서 ‘CSS 버튼’을 쉽게 제작할 수 있도록 도와주는 ‘Button Generator‘입니다. 버튼에 포함될 텍스트와 클래스명을 입력한 후 모양이나 사이즈 같은 상세히 지정할 수 있는데요. 왼쪽 상단으로 보이는 이미지가 오른쪽에서 사용자가 선택한 내용에 따라 실시간으로 반영되기에 어렵지 않게 제작이 가능합니다. 기본적으로 적용되어 있는 5개의 스타일 중 하나를 선택할 수도 있고 텍스트 입력 후 나머지 디자인을 우리가 직접 지정해 하나씩 모습을 만드는 것도 가능합니다. 

 

 

 

저도 이 서비스를 알게되고 ‘지금 써보러 갑니다’라는 텍스트로 금방 ‘CSS 버튼’을 만들어봤는데요. 생각보다 디테일하게 옵션을 지정할 수 있었고, 버튼과 관련된 코드를 생성해주기 때문에 복사하여 바로 테스트로 연결해볼 수 있었습니다. ‘CSS 버튼’의 경우 뉴스레터는 물론이고 다양한 페이지에서 사용되기에 유용하게 활용할 수 있지 않을까 싶네요. 

지난 5월, 콜투액션(CTA)을 위한 버튼, 이렇게 디자인해보는건 어떨까? ‘GRADIENT-BUTTONS’를 소개드린 적 있는데, 함께 보시면 더 많은 도움이 되실거에요!

 

 

2.Online Color Scheme Generator

 

 

두 번째로 소개드릴 서비스는 Color Scheme Generator입니다. 선택한 컬러와 잘 어울리는 조합을 쉽게 확인해볼 수 있는 서비스죠. ‘컬러’ 관련 서비스는 ‘지금 써보러 갑니다’를 통해 가장 많이 소개드렸던 터라 선택지가 많다고 생각합니다. 다만 오늘은 앞서 말씀드렸던 것처럼 ‘속도’에 초점이 맞춰져 있고 같은 맥락에서 ‘Color Scheme Generator’은 웹상에서 원하는 컬러 조합을 쉽고 빠르게 확인할 수 있다는 것에 큰 장점을 갖고 있습니다. 

 

 

 

먼저 원하는 컬러를 RGB, HSB, 코드값 형태 또는 직접 선택 해줍니다. 그럼 하단으로 선택한 컬러에 맞는 다양한 ‘조합’을 확인해볼 수 있죠. 조합에 따른 컬러와 코드를 함께 보여주기 때문에 이를 원하는 툴에서 바로 적용해볼 수 있습니다. 1-2개의 컬러는 정해져 있는데, 함께 활용할 컬러를 찾기 어렵다면 정해진 컬러를 미리 넣어보고 힌트를 얻을 수 있는 것! ‘빠르게 힌트’를 얻고 싶다면 많은 도움을 얻을 수 있을거라 생각됩니다!

지금 써보러 갑니다를 통해 소개된 ‘컬러’ 관련 서비스는 이 곳에서 모두 확인해보실 수 있어요!

 

 

3.Online Avatar Creator

 

 

마지막이자 3번째로 소개드릴 서비스는 웹상에서 쉽게 ‘아바타(Avatar)‘를 제작할 수 있는 서비스입니다. 아바타는 CSS 버튼, 컬러 조합에 비하면 상대적으로 중요도가 떨어질 수 있긴 하지만 서비스 성격에 따라 꼭 필요한 경우가 있기에 마지막에 넣게 되었는데요. 역시 어렵지 않게 성별에 따른 아바타 제작이 가능합니다.

 

 

 

가장 먼저 해야할 일은 ‘성별’을 선택하는 일입니다. 이후에는 얼굴(얼굴형, 입, 코, 눈), 헤어 스타일, (많이 나오지는 않지만)상의 스타일 등을 하나씩 선택해 원하는 아바타를 만들 수 있습니다. 

 

 


‘아바타’ 그 자체가 필요하다면 직접 만들지 않고 하단의 ‘random’버튼을 클릭해 자동 생성도 가능하고요. 위의 두 명의 아바타 역시 랜덤생성으로 확인할 수 있었습니다. 이렇게 완성된 아바타는 500×500, 1,000×1,000 사이즈(.png)로 다운로드 받을 수 있죠. 

 

 

 

간략하게 소개드린 서비스들은 모두 ‘Donesmart‘라는 곳에서 만들었습니다. 이 곳은 스타트업이 더 효율적으로 일했으면, 하는 바람을 담은 작지만 소중한 서비스들을 만들고 있는데요. 크롬 확장프로그램에서 자주 가는 사이트를 별도로 지정해 바로 이동할 수 있는 ‘Site Launcher’, 스타트업에게 유용한 툴을 큐레이션 하는 ‘Best Startup Tools’, 그 외에도 CSS버튼, 컬러 조합, 아바타 제작과 같은 시리즈 중 하나인 온라인 이미지 에디터, QR코드 제작 등 다양한 웹서비스와 콘텐츠를 제공합니다.