One Pixel에서 $1000를 잃은 방법

이것은 고객이 물건을 1픽셀씩 옮기면서 어떻게 1000달러를 잃었는지에 대한 이야기입니다. 그것은 내 경력을 변화시켰고, 나는 돈을 돌려달라고 요청한 적이 없습니다. 또한 웹 개발이 어떻게 변화하는지, 우리가 이러한 변화에 적응할 수 있는지에 대해서도 알려주었습니다.

예전에 저는 소셜 미디어 대행사를 운영하고 있었습니다. 사내 최첨단 시스템으로 소셜 미디어 계정을 운영하는 것 외에도 고객을 위한 콘테스트를 운영하고 소규모 마케팅 앱도 운영하고 있었습니다.

가끔 클라이언트가 전혀 모르고 왔기 때문에 우리는 처음부터 앱을 디자인하고 있었습니다. 마케팅 앱 개발을 위한 준비된 디자인을 가지고 오는 고객은 거의 없었습니다.

보통 제가 했던 일은 클라이언트의 예산에 맞춰 느슨하게 디자인을 따라가는 것이었습니다. 모두가 행복했고 콘테스트는 성공적이었으며 고객에게 새로운 팔로워를 많이 확보하고 브랜드 인지도를 넓혔습니다.

그게 소셜미디어의 시작이었는데, 유기적인 활동으로 고객에게 다가가는 것이 지금에 비하면 꽤 쉬웠어요.

그래서 웹 개발자 생활이 꽤 편했어요. 한 고객이 들어오기 전까지는. 그는 콘테스트를 원하지 않았습니다. 그는 자신의 소셜 미디어 계정에 뉴스레터 구독 페이지를 갖고 싶었습니다.

소셜 미디어 플랫폼의 이름은 언급하지 않겠지만 예전에는 HTML, CSS, JS를 사용하여 소셜 미디어 페이지에 하위 페이지를 만들 수 있었습니다.

내가 그 일을 위해 협상한 예산은 합리적이었습니다. 클라이언트가 그것을 받아들였습니다. 서두르지 않고 주문을 이행할 수 있는 충분한 시간이 있었습니다.

내가 언급하는 것을 잊었나요? 그는 뉴스레터 페이지를 자신만의 디자인으로 디자인했습니다. 그것은 아름답고 눈길을 사로잡았으며, 당시 앱 마케팅에 대한 아이디어보다 훨씬 뛰어났습니다.

저 같은 경우에는 페이지를 구성하고 다른 작업으로 이동하기만 하면 되니 작업이 더 쉬워졌습니다. 이틀 동안 다른 작업을 섞은 후 랜딩 페이지를 완성하고 결과에 만족하여 클라이언트에게 보냈습니다.

하지만 그 고객은 내 열정을 공유하지 않았습니다. 랜딩페이지 디자인이 다르다고 하더군요. 글쎄요. 디자인은 단지 영감을 준 것일 뿐이고 모든 것을 어느 정도 올바른 위치에 배치했을 뿐입니다.

나는 그것을 더 조정하면 된다고 생각했습니다. 버튼을 왼쪽, 이미지 위쪽 등으로 이동합니다. 완벽한 솔루션을 만들 때에도 일부 고객이 몇 가지 변경을 요청하는 경우가 많았기 때문에 이는 저에게 매우 일반적인 일이었습니다.

내담자가 원하는 것을 갖게 되었다는 참여감과 만족감을 주기 때문에 자연스럽고 중요한 단계이다.

며칠이 더 지난 후 뉴스레터 랜딩 페이지를 조정하여 고객에게 보냈습니다. 한 시간 뒤에는 “아직도 비뚤어져 있다”는 답장이 왔다.

구현이 제공된 디자인을 *거의* 완벽하게 표현했고 이 프로젝트에 대한 예산이 부족했기 때문에 실망스러웠습니다.

구현의 스크린샷을 만들고 이를 Paint.NET 앱의 디자인 위에 오버레이하기로 결정한 것이 바로 그 당시였습니다. 이를 통해 구현은 디자인과 유사했지만 요소는 다양한 방향에서 디자인에서 픽셀 단위로 떨어져 있다는 사실이 드러났습니다.

내 인생의 이 시점까지 나는 픽셀 차이를 보지 못한 것에 매우 만족했습니다. 나는 좌절했다. 하지만 저는 제가 맡은 이 일을 꼭 끝내고 싶었습니다. 그래서 저는 이 프로젝트를 더 진행했습니다. 몇 시간을 추가로 작업하여 전체적으로 예산을 300달러 초과했습니다.

이번에는 다른 접근 방식을 선택했습니다. 구현을 조정하려고 시도하지 않았습니다. 방금 요소를 옮겼으므로 Paint.NET의 디자인에 100% 맞습니다. 그것은 나의 첫 번째 픽셀 완벽한 구현이었습니다.

머리 속에서는 "말도 안 된다"와 "한번 해보자" 사이에서 고민하고 있었습니다. 마침내 새 버전을 클라이언트에 보낼 수 있었습니다. 픽셀이 완벽해지면 클라이언트는 결과를 받아들였습니다.

바로 다음 작업으로 넘어갈 생각이었는데, 궁금했어요. 차이점은 무엇입니까? 첫 번째 구현과 픽셀이 완벽한 구현을 비교하기 위해 두 개의 Paint.NET 앱을 나란히 열었습니다.

나의 다방면에 걸친 공학적 눈으로 본 것은 놀라웠습니다. 내 초기 구현은 보기 흉해 보였습니다. 나는 이전에 그것을 본 적이 없었고 이러한 2~3픽셀의 차이가 인식에 영향을 미치지 않는다고 생각했습니다. 그러나 나는 형편없는 눈으로 뉴스레터 모나리자를 바라보고 있었습니다.

처음에는 픽셀로 이런 말도 안되는 일에 대해 고객에게 비용을 청구하고 싶었습니다. 하지만 제가 매우 중요한 것을 배우고 있다는 점을 고려하여 저는 그에게 기본 요금만 청구했습니다.

이 순간과 이 클라이언트는 제가 프론트엔드 개발자에서 디자인 개발자로의 변신을 확고히 해주었습니다. 그 이후로 저는 수많은 디자이너, 클라이언트, 프론트엔드 개발자들과 함께 일해왔습니다.

모든 사람이 픽셀 단위까지 완벽한 구현을 기대하는 것은 아닙니다. 항상 필요한 것은 아니며 금전적으로 항상 현명한 것도 아닙니다. 하지만 때로는 그렇습니다. 특히 고객을 유치하고 싶을 때는 더욱 그렇습니다.

좋은 디자인은 사람들의 시선을 사로잡습니다. 좋은 디자인은 CSS 시트에 추가한 1px에 숨겨져 있습니다.

이러한 문제에 집중하려면 소프트웨어의 기술적인 측면을 정리해야 합니다. 따라서 전자상거래 상점이나 앱의 마케팅, 비즈니스 및 경험 측면에 더 많은 노력을 기울일 수 있습니다.

이것이 제가 Elastic Path가 제공하는 기능을 좋아하는 이유입니다. 이 글과 함께 제가 참여하고 있는 콘테스트를 후원하는 회사입니다. 여러 전자상거래 사이트를 설정하는 데 필요한 모든 운영 기능을 제공합니다.

개발자로서 저는 제품 카탈로그, 결제 시스템 등을 유지하고 개발하는 것보다 비즈니스 요구에 집중하기 때문에 이 아이디어를 좋아합니다. 그들은 새로운 전자 상거래 장소에 바로 접근할 수 있는 사용하기 쉬운 API를 제공합니다. .

글이 마음에 드셨다면 하트 아이콘을 눌러주시고, 댓글을 달아주시고, SNS에 공유해주세요. 건배!