처음 웹사이트를 만들기로 마음먹었을 때, 설렘은 정말 컸습니다. 태그를 외우고, 함수를 이해하고, 문법을 맞추는 것과 같이 코딩을 배우는 것이 가장 어려운 일일 것이라고 생각했습니다. 하지만 틀렸습니다. 코드를 작성하는 것은 의외로 쉬운 부분이었습니다. 진짜 도전은 그 코드들을 사람들이 혼란이나 좌절 없이 실제로 사용할 수 있는 무언가로 바꾸는 것이었습니다. 그 첫 프로젝트를 통해 개발이란 혼자서 타이핑하는 것이 아니라, 당신의 기술 스택에는 관심 없는 사람들을 위해 문제를 해결하는 일이라는 것을 배웠습니다. 저는 시간과 잠, 그리고 초기 사용자들을 잃게 만든 실수들을 저질렀습니다. 그중에서도 특히 뼈아팠던 다섯 가지 실수가 있습니다.
출시 전 완벽주의에 집착하기
저는 무언가를 완벽하다고 부를 자격조차 갖추기 훨씬 전부터 완벽주의의 함정에 빠졌습니다. 방문자가 페이지를 보기도 전에, 색상 코드의 미세한 톤을 바꾸느라 오후 전체를 보내고, 테두리 곡률(border-radius) 값을 8픽셀에서 10픽셀로 바꿨다 다시 되돌리기를 반복하며, 헤드라인 문구를 다섯 번이나 다시 썼습니다. 스스로는 다듬고 있다고 생각했지만, 사실은 품질이라는 구실 아래 미루고 있었던 것입니다. 결과는 어땠을까요? 출시가 3주나 늦어졌습니다. 마침내 사이트가 공개되었을 때, 제가 그토록 고민했던 버튼의 곡률에 대해 언급한 사용자는 단 한 명도 없었습니다. 그들은 폼이 오류 없이 제출되는지에만 관심이 있었습니다.
교훈은 명확했습니다. 일단 결과물을 내놓으라는 것입니다. 받지도 않은 피드백을 바탕으로 개선할 수는 없습니다. 구조를 탄탄하게 잡고 핵심 기능이 작동하는지 확인한 뒤, 일단 출시하십시오. 다듬는 작업은 버전 0이 아니라 버전 2의 몫입니다. 무엇이 실제로 고장 났는지, 아니면 단순히 당신의 상상 속에서만 불완전한 것인지는 사용자가 알려줄 것입니다.
너무 많은 것을 너무 빨리 만들려 하기
제 프로젝트는 책 추천을 공유하는 간단한 도구로 시작되었습니다. 그것이 전부였습니다. 하지만 2주 차가 되었을 때, 저는 사용자 로그인 시스템, 동적 평점 그래프, 계층형 댓글 섹션, 다크 모드 전환, 이메일 요약 서비스까지 구상해 놓았습니다. 그중 제대로 작동하는 것은 하나도 없었습니다. 로그인 흐름은 절반의 확률로 깨졌고, 그래프에는 표시할 실제 데이터가 없었습니다. 댓글 섹션은 중복 작성을 허용했습니다. 그 사이, 사이트의 존재 이유인 기본적인 도서 목록 기능은 홈페이지에 접속한 사람들을 혼란스럽게 만드는, 망가지고 미완성된 부가 기능 더미 아래에 파묻혀 있었습니다.
한 가지 문제를 깔끔하게 해결하는 단순한 사이트가 열 가지 일을 어설프게 하는 복잡한 사이트보다 항상 낫습니다. 코드를 한 줄 더 쓰기 전에, 당신의 제품이 사용자를 위해 수행해야 할 단 한 가지 임무가 무엇인지 정의하십시오. 그것부터 만드십시오. 테스트하십시오. 신뢰할 수 있을 때까지 다듬으십시오. 사용자가 실제로 대시보드나 소셜 피드를 요구한다면 그때 추가하면 됩니다. 그때까지는 날카로운 주방용 칼 하나면 충분한 상황에서 맥가이버 칼을 만들고 싶은 유혹을 참아내십시오.
외형 뒤에 숨겨진 경험을 무시하기
우아한 폰트와 세련된 색상 조합을 고르는 데 몇 시간을 썼습니다. 히어로 섹션의 배경 그라데이션에 집착했습니다. 그러면서 정작 사이트를 사용할 때의 느낌은 무시했습니다. 압축하지 않은 고해상도 PNG 파일을 사용하느라 페이지 로딩 속도는 거북이처럼 느려졌습니다. 내비게이션 라벨은 보기에는 좋지만 링크를 클릭하면 어디로 이동할지 짐작조차 할 수 없는 모호한 단어들을 사용했습니다. 버튼은 얇고 세련되었지만 휴대폰 화면에서 탭하기에는 너무 작았습니다.
시각적 디자인과 사용자 경험(UX)은 서로 대체될 수 있는 것이 아니라는 사실을 저는 고생 끝에 깨달았습니다. 방문자가 배너 이미지를 기다리느라 몇 초를 허비하거나, 두 번의 클릭 안에 원하는 곳에 도달하지 못한다면 아무리 아름다운 인터페이스라도 실패한 것입니다. 모든 상호작용을 단순하게 만드십시오. 내비게이션은 쉬운 언어로 표시하십시오. 에셋을 압축하십시오. 탭 대상이 충분히 큰지 확인하십시오. 속도와 명확성은 마지막에 추가하는 보너스가 아니라, 다른 모든 것이 그 위에 세워지는 토대입니다.
내 컴퓨터에서만 테스트하기
저는 단 한 대의 노트북, 단 하나의 브라우저, 단 하나의 화면 해상도에서 사이트 전체를 개발했습니다. 제 컴퓨터에서는 모든 것이 완벽해 보였습니다. 그러다 한 친구가 아이폰으로 사이트를 열었습니다. 버튼이 겹치고, 텍스트가 컨테이너 밖으로 넘쳐흘렀습니다. 또 다른 친구는 맥에서 사파리를 사용했는데, CSS 그리드 레이아웃 전체가 읽을 수 없는 상태로 무너져 내렸습니다. 저는 제 컴퓨터에서 잘 작동하면 모두에게도 잘 작동할 것이라고 막연히 가정했습니다. 그 가정 때문에 저는 주말 내내 정신없이 긴급 수정을 하고, 민망한 사과를 해야 했습니다.
제 실수를 반복하지 마십시오. 배포하기 전에 크롬, 파이어폭스, 사파리, 엣지에서 사이트를 실행해 보십시오. 브라우저의 개발자 도구를 사용하여 다양한 너비의 휴대폰, 태블릿, 노트북 환경을 시뮬레이션하십시오. 모든 링크를 클릭하고, 모든 폼을 제출해 보십시오. 창 크기를 과감하게 조절해 보십시오. 테스트 단계에서 발견하는 버그는 사용자가 실제 서비스 환경에서 발견하는 버그보다 훨씬 비용이 적게 듭니다.
피드백을 개인적인 공격으로 받아들이기
프로젝트를 공유하려니 긴장되었습니다. 사람들이 싫어하면 어쩌지? 동료가 제가 공들여 만든 기능을 없애자고 제안했을 때