NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

프로덕트

개발자와 대화할 때 유용한 도구 4가지

 

“개발자와 말이 안 통해요”

 

오래전부터 들려왔던 말이다. 나 또한 비개발자로서 여러 번 입에 담았던 말이다. 물론 예전에는 그러려니 하는 농담 정도로 여겨지곤 했다. 그러나 생활을 둘러싼 모든 것들이 디지털화하는 시대에서, 이제 개발자와 말이 안 통하면 제대로 일하기가 힘들다. 서로 말이 통하지 않을 때 대부분의 경우 아쉬운 건 비개발자 쪽이다. 결국 실제 서비스로 구현하고 고쳐줄 능력이 있는 것은 개발자니까.

 

그럼 개발자와 말이 통하려면 어떻게 해야 할까. 나는 도구의 사용을 적극적으로 권장하는 편이다. 개발자가 (비개발자의 요청사항을 듣고) 답답해하는 포인트를 관찰해보면, '뭐가 문제인지 명확하지 않아서'인 경우가 많다.

 

예를 들어 "제 화면에서 사이트 이미지가 안 떠요!"라고 개발자에게 보고하면, 개발자는 '어떤 컴퓨터/스마트폰에서 확인했는가, 브라우저 버전은 무엇인가' 등 필요한 정보를 찾게 된다. 그걸 매번 일일이 물어보고 확인하다 보면 마음은 답답해지고 시간은 흘러가고 작업은 더뎌질 수밖에 없다.

 

개발자에게 문제를 보고할 때 구체적인 정보 위주로 전달하면 커뮤니케이션이 훨씬 매끄러워질 것이다. 그를 위해 필요한 도구를 몇 가지 소개해 보겠다.

 

1. whatismybrowser.com

PC 정보 공유
<출처: whatismybrowser.com>

 

나의 브라우저, 해상도, OS, IP주소 등의 정보를 한꺼번에 담아 다른 사람과 공유할 수 있는 서비스로, 최근 가장 애용하고 있다. 웹 서비스를 운영하는 회사에서 일하는 사람에게 꼭 필요한 도구라고 생각한다.

 

사이트에 접속하면 내 컴퓨터 환경에 대한 정보를 즉시 확인할 수 있다. 확인 가능한 정보는 다음과 같다.

  • 웹 브라우저 이름과 버전
  • 컴퓨터 OS 이름과 버전
  • 자바스크립트 및 쿠키 활성화 여부
  • IP 주소와 대략적인 지역
  • 통신사 이름
  • 컴퓨터 해상도
  • 브라우저 해상도
  • User Agent
  • 브라우저 언어 등

 

문제 종류에 따라 다르겠지만, 웬만한 경우 개발자에게 위 정보를 공유하는 것만으로도 충분하다. 공유 방법도 간단하다. 사이트에 상단에 'Copy URL to clipboard'라는 버튼이 있는데, 이 버튼을 누르면 나의 정보를 담고 있는 고유 링크가 복사된다. 그리고 이 링크를 상대방에게 전달하면 끝이다.

 

전달받은 링크로 개발자가 접속하면 해당 링크가 며칠 몇 시 몇 분에 발급되었는지, 상대방의 컴퓨터 환경은 어떻게 되는지를 한눈에 확인할 수 있다. 확인도 쉽고, 공유도 쉬우니 업무를 하거나 개발자와 소통할 때 빼놓을 수 없는 도구다.

 

 

2. locaping.com/traceroute

해외 접속 속도
<출처: locaping.com>

 

글로벌 서비스를 운영할 때 '해외에서 접속할 때 너무 느려요'라는 고객 문의가 발생할 수 있다. 이때 단순히 개발자한테 “해외에서 느리대요”라고 전달하면 불협화음이 발생할 수 있다. 심지어 '도대체 얼마나 느리다는 건데?'라는 짜증을 불러일으킬 수 있다.

 

locaping.com를 활용하면 특정 국가에서 우리 사이트를 접속했을 때 RTT(Round Trip Time, 왕복 시간)가 얼마나 걸리는지 확인할 수 있다. 예를 들어 옆 나라 일본에서 우리 사이트를 접속했을 때와 바다 건너 미국에서 접속했을 때 몇 초 차이 나는지를 비교해볼 수 있다.

 

물론 이미지나 동영상 등 사이트의 모든 요소에 대한 검사보다는, 단순히 테스트용 신호가 되돌아오는 시간을 비교하는 것이라 정밀한 정보라고는 할 수 없다. 그러나 대략 얼마나 느린지 숫자로 확인해 개발자에게 보고할 정도로는 충분하다.

 

 

3. bluetree.ai/screenfly

웹서비스 레이아웃
<출처: bluetree.ai>

 

웹 서비스의 레이아웃이 깨져 보일 때, 왠지 정렬이 어긋나 보일 때가 있다. 그 즉시 "개발자님! 사이트가 이상해요!!"를 외치고 싶어 지지만, 그전에 한 가지를 스스로 검증해보자. '내 컴퓨터 화면에서만 그러는지' 확인해보는 것을 권장한다.

 

예를 들어 나의 웹 브라우저의 해상도는 1680x1025인데, 서비스 사이트는 1920x1080 해상도에 최적화되어 있다고 해보자. 그 경우 내 컴퓨터에서는 사이트 요소가 완벽하게 정렬되어 있지 않아 보일 수 있다. 이때 bluetree.ai/screenfly로 접속해 '다른 해상도에서 어떻게 보이는지' 확인해보면, 단순히 '사이트가 안 이뻐요!'가 아닌 'OO 해상도에서는 최적화가 안 되어 있어요'라며 구체적인 정보를 전달할 수 있다. 물론 여러 해상도에서 잘 나오는 것을 확인했으면 개발팀의 시간을 뺏지 않았으니 그것만으로도 좋다.

 

최근에는 컴퓨터 해상도에 관계없이 대응할 수 있는 반응형 사이트가 많아지면서 해상도가 문제 될 소지는 줄어들고 있긴 하다. 하지만 그만큼 사용자들의 해상도도 다양해지고 있어서, 이 정도 확인은 비개발자가 스스로 하면 개발팀과의 협업에 도움이 될 것이다.

 

 

4. 크롬 개발자 도구에서 HAR 파일 저장하기

크롬 개발자 도구
<출처: 크롬 개발자 도구>

 

수많은 사람이 구글 크롬을 기본 브라우저로 사용하고 있는데, 크롬에는 '개발자 도구'라는 도구가 있다. 이름만으로는 개발자들만 쓸 것 같지만, 비개발자에게도 유용한 도구다.

 

업무를 위해 사이트를 확인할 때 "웹사이트 이미지 뜨는 속도가 느려요"라고 보고할 때가 있다. 그럴 때 그저 '느리다'라고 표현하지 않고, 어떤 부분이 얼마나 느린지를 데이터로 보여주면 개발자에게 훨씬 와닿게 전달할 수 있다.

  • 개발자 도구 열기 (크롬에서 오른쪽 클릭 > 살펴보기(Inspect) 클릭)
  • 개발자 도구에서 네트워크(Network) 탭 누르기
  • 사이트 접속하기
  • 접속을 시작과 함께 발생하는 관련 데이터와 각 소요 시간이 자동으로 개발자 도구에 기록됨
  • 사이트 로딩이 끝났으면 개발자 도구에서 오른쪽 클릭 후 'HAR 형식으로 모두 저장(Save all as HAR with content)' 클릭
  • 기록된 데이터가 HAR 파일 형태로 저장됨

 

 

‘백문이 불여일견’, 말로 설명하면 서로 힘들다

개발자는 개발하는 사람이고, 개발의 대부분은 컴퓨터 언어로 이루어져 있다. 그리고 컴퓨터 언어는 답답할 정도로 모호함을 용서하지 않는다. 흑과 백을 확실히 할수록 확인이 편해진다.

 

그리고 개발자가 일하기 편해지면 비개발자도 원하는 결과를 빨리 얻을 수 있다. "말씀하시는 내용이 이건가요?"라며 서로의 이해를 맞추는데 소요되는 시간을 줄일 수 있다. 물론 대충 말해도 찰떡같이 이해하는 개발자분들도 많지만, 구체적인 정보로 대화하면 협업이 한층 더 쉬워진다.

 

굳이 말로 설명하지 않아도 되는 건 파일과 링크를 전달하면 좋다. 위에 소개한 4가지 외에도 모호함을 줄여주는 도구는 세상에 많으니 부지런히 활용하는 걸 추천한다.

 

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

댓글 0

맨오브피스

효율 추구에만 매달리지 않으려고 노력하는 프로덕트 매니저입니다.

애드블록의 광고 차단 원리는 무엇일까?

프로덕트

엑셀 함수는 곧 사라질 운명이 아닐까?

기획

읽히는 슬랙 (업무) 메시지 쓰는 법

기획

비개발자가 코딩을 배우면 좋은 이유

기획

내 생활을 지키는 알림 설정 전략

기획

우선순위가 낮은 작업은 언제 처리해야 할까?

기획

순조로운 퇴사를 위해 해야 할 일 5가지

기획

OTT 시대의 반항아, 일본 ‘TVer’ 살펴보기

프로덕트

유튜브에서 '싫어요' 숫자가 사라졌다

프로덕트

슈퍼휴먼, 이메일에 월 30달러나 쓰는 이유는?

프로덕트

구글의 수수료 정책은 정말로 부당할까?

프로덕트

인터넷 뱅킹, Z세대에 열광하는 이유는?

프로덕트

나를 만족시킨 QR 체크인 앱은 무엇일까?

프로덕트

스포티파이, 왜 한국에서는 그저 그럴까?

프로덕트

구글의 발표는 왜 지루할까? (feat. 애플 이벤트)

프로덕트

OTT 이야기에 로쿠(Roku)가 빠질 수 없지

프로덕트

프로덕트 매니저라는 직무는 왜 생긴 것일까?

기획

디자인 커뮤니케이션 툴, 윔지컬(Whimsical) 둘러보기

디자인

영상 컨펌 협업툴 '이미지블' 살펴보기

프로덕트

테크 기업 CEO들의 하루 살펴보기

기획

구글 캘린더 100% 활용하기

프로덕트

총성 없는 전쟁, 아마존 VS 가짜 리뷰

프로덕트

애플 TV+는 잘 되고 있을까?

프로덕트

구글 스태디아는 왜 흥하지 못했을까?

프로덕트

경기지역화폐 앱 살펴보기

프로덕트

"카운트다운 시작!!!"...출시 앞둔 디즈니플러스 미리보기

프로덕트

점유율 2%의 활약, MS 빙(Bing)

프로덕트

PM 업무에 꼭 필요한 소프트 스킬 6가지

기획

업무 생산성을 높이는 IT 환경 만들기

기획

다른 나라 사람들은 어떤 앱에 돈을 쓸까?

프로덕트

아동 성착취물을 막겠다는 애플은 왜 욕먹는 걸까?

프로덕트

휴가 떠나기 전, 인수인계 확실히 하는 법

기획

구글이 직접 반도체를 만드는 게 나랑 무슨 상관일까?

개발

구독 서비스를 현명하게 사용하는 5가지 방법

기획

디지털 피규어 콜렉팅 앱, 비브(VeVe) 살펴보기

프로덕트

구글 미트가 프로그레시브 웹 앱(PWA)으로 출시된 이유

프로덕트

깃허브 코파일럿(Copilot)은 무엇이며, 왜 욕먹는 걸까?

프로덕트

원격근무의 치명적 단점 5가지

기획

구글이 안드로이드 앱 배포를 APK 대신 AAB로 바꾸는 이유

프로덕트

IT 직무 탐구: 프로덕트 매니저 vs 프로덕트 오너 (+그 외)

기획

구글 앱시트(AppSheet)로 노코드 앱 만들기

개발

이제는 운영체제도 구독이다! 윈도우 365 공개

프로덕트

즐겁고 효율적인 재택근무를 위한 7가지 기술

기획

절대 빼놓을 수 없는 크롬 확장 프로그램 7가지

프로덕트

IT 스타트업의 ­인수합병이 실무자에게 미치는 영향

기획

트위터 블루와 슈퍼 팔로우는 과연 돈 값을 할까?

프로덕트

경기도가 만든 배달 앱, 배달특급 리뷰

프로덕트

점점 맥을 닮아가네? 윈도우 11만의 특징 살펴보기

프로덕트

메시지 예약이 된다고? 슬랙의 최신 기능 5개 따라잡기

프로덕트

날씨 앱 번개가 더 리얼해졌다! iOS 15 미리 보기

프로덕트

스포티파이가 만든 클럽하우스, '그린룸' 살펴보기

프로덕트

안드로이드 12가 온다! 주요 기능 살펴보기

프로덕트

넷플릭스의 새로운 기능, 랜덤 재생 살펴보기

프로덕트

맥에서도 쓸 수 있는 마이크로소프트 엣지만의 장점

프로덕트

쉽게 읽히는 티켓 쓰는 법

기획

당근마켓은 어떻게 돈을 벌까?

프로덕트

구글 시트로 앱스토어 정보 긁어오는 방법

프로덕트

클럽하우스 인기가 뚝 떨어진 이유

프로덕트

데이터별 딱 맞는 그래프 찾기

기획

프로젝트 매니지먼트에 도움이 되는 툴들

기획

비개발자를 위한 파이썬 독학법 (하)

개발

비개발자를 위한 파이썬 독학법 (상)

개발

아웃소싱 개발이 필요한 상황은?

아웃소싱

#해시태그가 정확히 무엇인가요? 해시태그 A to Z

기획

아이디어를 체계적으로 기록하는 방법

기획

그럼에도 불구하고, 엑셀이 필요한 이유

프로덕트

소프트웨어 개발은 어떻게 이루어질까?

개발

구글의 OTP는 어떻게 비행기 모드에서도 작동할까?

개발

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.