brunch

You can make anything
by writing

C.S.Lewis

by 세컨드스페이스 Jun 03. 2021

웹의 시각적 피드백 툴 4가지 소개

시각적 피드백 툴이란 무엇인가

시각적 피드백 및 버그 관리 툴(tool) 4가지를 소개해 드리고자 합니다. 시각적 피드백 툴이란 라이브 된 웹 사이트나 시안을 공유해 시각적인 부분이나 버그 등을 바로 피드백을 주고받을 수 있는 서비스입니다. 다음의 tool을 이용해 즉각적으로 버그를 추적할 수 있다는 점이 굉장히 용이합니다. 주로 Visual Feedback Tool, Website Feedback Tool, Web Bug Tracking Tool이라고 소개가 되고 있습니다.

1) BugHerd

BugHerd는 크롬 확장 프로그램을 통해 이용해 보았는데요. 우측 사이드 바를 통해 이슈를 생성하고, 공유할 수 있었습니다. 14일 무료 평가판을 제공하고 있어 2주간 사용해보신 후 팀의 특성에 적합하다 판단되면 결제 후 도입을 고려하시면 됩니다.

다른 툴과 다르게 독특하게 느껴졌던 점은 이슈들이 처리과정에 따라 칸반 보드로 제공된다는 점이었습니다.

진행상황을 한눈에 파악 가능하다는 점이 굉장히 편하다고 생각했답니다. (Xd나 제플린을 이용했을 때 디자인을 보고 이슈를 생성하기엔 용이했지만 이게 잘 진행되고 있는지 파악하기엔 불편하다고 생각했는데 BugHerd는 그러한 불편함을 해결해 주었습니다.)

2) Marker.io

Marker.io 경우에는 이슈를 리포팅하면 연동해둔 지라나 트렐로 등 협업 툴로 바로 전달이 됩니다. 해당 서비스의 경우에는 제가 원하는 버그 관리 방법이 아닐 뿐더러 금액대도 좀 있어서 사용해 보지는 못했지만 기존에 전적으로 사용하는 툴이 있으시다면 한곳에 집중해서 편하게 이슈 관리를 할 수 있다는 장점이 있습니다.

해당 서비스를 직접 설명해주는 영상이 있어 가져왔습니다. 영상을 보면 사용법을 이해하시는데 도움이 되는 영상입니다. https://marker.io/ -> 홈페이지에 접속하셔서 Play intro 버튼을 클릭하면 서비스 소개 영상을 보실 수 있습니다.

3) Markup.io

다른 툴들은 일정 기간 동안 체험할 수 있는 버전을 제공한다던지, 사용자의 경우 일정 부분 무료로 사용할 수 있게 하는 방법으로 체험이 가능했습니다. 이 사이트는 그런 것이 없이 무료로 제공하고 있다는 점이 좋았습니다. 또한, 사용법도 굉장히 쉬워 간편하게 이용할 수 있던 피드백 도구입니다.

웹 사이트뿐 아니라 이미지나 시안을 올려 해당 이미지에 대한 피드백도 진행할 수 있습니다. 위 이미지를 보시면 알 수 있듯 굉장히 깔끔하고 직관적이어서 정말 마음에 들었던 툴이었습니다. 보드 또한 깔끔한 카드 형식으로 되어 있습니다.

단점은 검색창에서 한글은 입력이 잘 되지 않고, 검색이 필터링되지 않는다는 점입니다. [키워드] 이러한 형식으로 키워드를 붙여 사용한다면 해결할 수 있는 부분이라 생각되어 가볍게 사용하기에 무리는 없을 거라 생각됩니다. 다만, 추적하는 일이 빈번하고 규모가 점점 커지게 되면 단점이 생각보다 많아질 수 있는 툴이라고 생각됩니다.

4) Userback

Userback 또한 크롬 확장 프로그램을 설치하여 이용해 보았는데요. 설치 후 실행하면 화면 상단에 다음과 같은 메뉴 바가 등장합니다. 박스를 치거나, 화살표, 그림, 텍스트 등을 통해 화면의 이슈를 관리할 수 있습니다.

코멘트를 달기 위해 영역 지정하는 등 피드백을 진행하면, 스크롤이 불가합니다. 코멘트 방식이 편하긴 하지만 스크롤이 불가하여 페이지 내 이슈 위치가 모여있지 않다면 한 번에 피드백을 남기기 어렵다는 단점이 있습니다. Userback에서는 이슈를 전달할 때 아래 화면과 같이 별점과 함께 코멘트를 남기게 되어 있습니다. 한 번에 피드백도 못 남기는데 과정도 단계가 존재해 다른 툴들에 비해 번거롭다는 인식이 강합니다.

전반적으로 어떤 서비스가 있는지 찾는 정도였어서 자세한 사용법을 다루지는 않았습니다만, 이런 서비스가 있다는 것을 알게 되고 공유하면 좋을 것 같다는 생각에 시각적 피드백 및 버그 관리를 도와주는 툴을 소개해 드리는 글을 작성해 보았습니다. 디자인 시안에서는 xd나 제플린, 인비전 등 다양한 툴을 이용하여 디자인 피드백을 진행하실 것이라 생각됩니다. 라이브 된 웹을 다이렉트로 피드백할 수 있는 방법이 다양하게 존재하니 팀의 특성에 맞게 골라서 사용해 보시는 것은 어떨까요?

오픈 슬랙 채널에서 소통해요!

잡담 / 개발 문화 / 일하는 방식 / 정보 공유 / 채용 문의 / 프로젝트 문의 등 어떠한 소통도 환영합니다 :)

오픈 슬랙 채널에 참여하기⬇️

https://join.slack.com/t/secondspace-open/shared_invite/zt-19q85dgid-6TCjbezQs4TTafBwT4BxAQ

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari