요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

서비스에서 ‘선'의 적용 방법을 떠올리면 가장 먼저 생각나는 과정이 ‘온보딩'입니다. 특히 특정 기능을 사용자에게 안내하는 경우, ‘선'은 정확한 위치를 바탕으로 기능을 설명하고자 할 때 매우 유용합니다. 오늘은 기능 안내를 포함해 서비스 내 여러 방법으로 사용할 수 있는 디자인 관점에서의 ‘선'을 웹상에서 쉽게 생성하고 다운로드하여 사용할 수 있는 서비스 ‘Fffuel’을 소개하고자 합니다.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

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

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인

서비스에서 ‘선'의 적용 방법을 떠올리면 가장 먼저 생각나는 과정이 ‘온보딩'입니다. 특히 특정 기능을 사용자에게 안내하는 경우, ‘선'은 정확한 위치를 바탕으로 기능을 설명하고자 할 때 매우 유용합니다. 오늘은 기능 안내를 포함해 서비스 내 여러 방법으로 사용할 수 있는 디자인 관점에서의 ‘선'을 웹상에서 쉽게 생성하고 다운로드하여 사용할 수 있는 서비스 ‘Fffuel’을 소개하고자 합니다.

 

다섯 가지 편집 도구를 바탕으로 만드는 화살표

화살표 제작 툴

‘Fffuel’은 ‘화살표'를 입맛에 따라 손쉽게 제작할 수 있도록 도와주는 툴입니다. 이 서비스에서 우리가 가장 먼저 설정할 수 있는 대상은 ‘비율'로 1:1, 4:5, 16:9 사이즈로 선을 편집할 수 있습니다. 설정한 비율에 따라 SVG 포맷으로 받을 수 있어 초기 설정 내용을 잘 확인하는 것이 중요합니다.

 

화살표 스타일 지정

 

사용자가 쓸 수 있는 편집 도구는 크게 다섯 가지입니다. 먼저, ‘화살표'의 스타일을 지정할 수 있습니다. 직선을 포함해 1개의 커브, 2개의 커브와 직각으로 구성된 선을 제작할 수 있도록 구성됩니다. ‘직선'의 경우 선의 길이, 두께, 점선 간 여백 등을 별도로 지정할 수 있습니다.

 

위 이미지 속 ‘선' 세 가지는 기본 설정된 선의 모양과 더불어 제가 점선으로 이뤄진 선을 두께 등에 따라 각기 다르게 설정한 모습입니다. 같은 모양이라 하더라도 이처럼 다양한 모습의 선을 쉽게 편집할 수 있어 좋습니다.

 

커브 편집 적용

 

커브의 경우 직선보다 더 다양한 편집 도구를 적용할 수 있게 구성됐으며, 1개, 2개 중 선택 가능합니다. 커브를 어떤 방향으로 지정할 것인지 선택할 수 있어 꽤 여러 모습으로 적용된 선을 확인할 수 있습니다. 직선은 다소 딱딱하게 느껴질 수 있어, 이곳에서 처음 ‘선'을 제작할 때 1개의 커브가 적용된 모습을 자주 살펴봤습니다.

 

화살표 스타일 지정

 

두 번째로 활용할 수 있는 편집 도구는 화살표 끝부분의 스타일을 지정하는 것입니다. 다이아몬드, 직선, 삼각형 등 총 여섯 가지 모양을 선택할 수 있습니다. 모양의 크기를 슬라이더로 별도 선택할 수 있으며, 양쪽에 모양을 적용하는 것 역시 클릭 한 번이면 됩니다. 한 가지 모양만 제공했다면 커브 등을 적용해도 다소 밋밋하게 느껴졌을 텐데 이렇듯 여섯 가지 모양을 선택할 수 있어 적용할 곳을 미리 고려해 적합한 모습을 확인할 수 있습니다.

 

화살표 위치 지정

 

‘화살표'의 위치를 지정하는 것도 가능합니다. 기본적인 방향과 더불어 편집 중인 화면 내 어느 곳에 화살표를 위치시킬 것인지도 설정할 수 있습니다. 같은 모양이라도 화면 내 기능 위치에 따라 화살표 방향을 달리해 적용할 수 있는 역할을 해주기도 합니다. 이처럼 스타일뿐만 아니라, 원하는 비율과 위치에 따라 화살표를 배치하고 최종 편집해 받을 수 있는 조건을 제공해 더욱 유용하게 느껴집니다.

 

컬러 선택

 

컬러도 선택 가능합니다. 기본 지정된 컬러 외, 24개 중 하나를 선택할 수 있으며 직접 값을 지정해 원하는 컬러를 지정하는 것도 할 수 있습니다. 컬러 역시 적용할 대상과 톤을 맞추기 위한 중요한 기준이기에 편집 도구에 포함된 것이 반갑습니다.

 

마지막 편집 옵션

 

‘화살표' 뒷부분 선의 모양을 설정하는 것이 마지막 편집 옵션입니다. 사각 또는 원형 중 선택할 수 있으며, 화살표 모양 또는 적용 대상에 맞춰 마지막에 설정하는 것이 좋을 것 같습니다. 눈에 잘 띄지 않는 부분이라고 생각할 수도 있지만, 끝 모양 역시 화살표 자체의 분위기를 결정하는 요소라고 생각하기에 개인적으로 꼭 있어야 하는 편집 기능 중 하나라고 생각합니다.

 

라이트 모드 다크 모드

 

편집은 라이트 모드와 다크 모드 중 하나를 선택해 진행할 수 있습니다. 적용 대상(서비스 등)이 두 모드를 동시에 지원하거나 지원하지 않음에도 OS에 따라 적용되는 경우를 고려해 양쪽에 맞는 화살표를 살펴볼 때 특히 유용하게 사용할 수 있는 기능입니다.

 

 

한 번은 꼭 써봐야 하는 이유

몇 번의 화살표와 선을 편집하면서 느낀 건, 편집에 딱 필요한 기능만 한 페이지 내 제공한다는 점이었습니다. 저는 전문적인 디자인 툴을 잘 활용하지 못하지만, 제 기준에서도 어렵지 않게 필요한 기능만 사용할 수 있어 제작까지 오랜 시간이 걸리지 않았습니다.

 

svg 다운로드

 

화면 구성 상 편집 중인 화살표의 모습은 상단에, 편집 도구는 하단에 있어 자칫 불편하게 느껴질 수 있습니다. 그렇지만 편집 도구 쪽으로 스크롤을 내리면 다운로드 버튼 위치에 현재 편집 중인 대상을 확인할 수 있어 흐름이 끊기지 않아 좋았습니다. 편집 후 SVG로 받을 수 있을 뿐만 아니라, 코드를 복사해 바로 활용할 수 있다는 점도 만족스러웠습니다.

 

디자인 편집 도구

 

화살표뿐만 아니라 SVG 배경, 패턴, 그라데이션 생성 등 다양한 디자인 편집 도구를 제공해 한 곳에서 여러 결과물을 만들어 낼 수 있습니다.

 

다양한 디자인 툴

 

Fffuel에서는 오늘 소개한 화살표(선) 생성 기능뿐만 아니라 훨씬 다채로운 제작 툴이 제공되니, 다양한 디자인 툴을 이용해 작업하고 싶다면 한 번 사용해 보는 것도 디자인 작업에 도움이 많이 될 것이라 생각합니다.

 

<참고자료>

fffuel

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

좋아요

댓글

공유

공유

댓글 0
작가
514
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

요즘IT가 PICK한 뉴스레터를 매주 목요일에 만나보세요

요즘IT가 PICK한 뉴스레터를
매주 목요일에 만나보세요

뉴스레터를 구독하려면 동의가 필요합니다.
https://auth.wishket.com/login