4. 처음 만들기 좋은 것과 어려운 것

한 줄 요약
소개 페이지와 링크 모음의 완성 모습을 보고 첫 프로젝트의 크기를 정합니다.
예상 읽기·실습 시간
12~18분 · 개인차 있음
읽는 방식
설명과 사례

첫 프로젝트를 고르는 기준

처음 만들 것은 한 문장으로 목적을 설명할 수 있고, 잘됐는지 눈으로 확인하기 쉬운 것이 좋습니다. “내 취미와 연락 링크를 보여 주는 페이지”나 “자주 쓰는 자료를 검색하는 링크 모음”이 그런 예입니다. 사용하는 사람도 우선 나 또는 소수의 지인으로 생각하면 필요한 기능이 줄어듭니다.

반대로 처음부터 회원가입, 결제, 예약, 여러 사람의 비공개 자료를 모두 다루면 확인할 범위가 크게 늘어납니다. 버튼이 보이는지만으로 성공을 판단할 수 없고, 돈이나 다른 사람의 자료가 잘못 처리될 경우까지 생각해야 하기 때문입니다. 아이디어의 가치와 첫 연습으로 적합한지는 별개입니다.

이 책의 두 결과물

첫 결과물은 별명과 짧은 소개, 관심사, 링크가 있는 한 페이지입니다. 자기소개 완성 예시를 열면 어떤 크기의 결과를 만드는지 볼 수 있습니다. 예시의 모든 장식을 따라 할 필요는 없습니다. 첫 실습의 중심은 글을 배치하고, 링크를 연결하고, 한 문장을 수정하는 데 있습니다.

두 번째 결과물은 이름과 주소를 가진 링크 목록입니다. 새 링크를 넣고, 단어로 찾고, 같은 브라우저에서 다시 여는 기능을 더합니다. 링크 모음 완성 예시는 동작을 이해하기 위한 참고입니다. 예시에는 삭제와 자료 내보내기도 있지만, 처음부터 모든 기능을 한꺼번에 요청하지 않습니다.

결과물방문자가 하는 일내가 확인할 일
소개 페이지글을 읽고 링크를 누릅니다.내용이 읽히고 정한 곳으로 이동하는지 봅니다.
링크 모음링크를 추가하고 검색합니다.입력한 항목이 나오고 다시 열어도 남는지 봅니다.

기능을 덜어 내는 판단

독서 모임 페이지를 만들고 싶다면 처음에는 모임 설명과 신청 안내 링크로 충분할 수 있습니다. 직접 회원가입과 결제를 만들지 않아도 사람들에게 정보를 전달할 수 있습니다. 무엇을 빼면 아쉬운지보다, 목적을 이루는 데 반드시 필요한 것이 무엇인지 먼저 생각합니다.

링크 모음도 처음에는 내가 쓰는 브라우저에만 저장합니다. 다른 휴대전화에서 같은 목록이 자동으로 보이지 않더라도 이번 범위에서는 예상된 제한입니다. 여러 기기에서 공유하려는 순간에는 자료를 보관할 별도 공간과 사용자 구분을 추가로 설계해야 합니다.

세 가지 아이디어를 비교해 보기

첫 번째 아이디어는 ‘내 취미를 소개하는 페이지’입니다. 들어갈 글과 사진을 내가 고르고, 방문자는 읽고 링크를 누릅니다. 어떤 내용이 맞는지 내가 알고 있고, 잘못되었는지도 화면에서 확인하기 쉽습니다. 첫 연습으로 고르기 좋은 이유가 여기에 있습니다.

두 번째는 ‘내가 쓰는 링크 모음’입니다. 내가 넣은 자료가 목록에 나오고 검색되며 다시 열어도 남아야 합니다. 첫 번째보다 동작과 보관을 더 생각해야 하지만 사용자가 우선 나 한 명이고 예시 자료로 시험할 수 있습니다. 이 책에서는 첫 페이지를 이해한 뒤 다루는 다음 단계로 놓았습니다.

세 번째는 ‘동네 사람들의 유료 예약 서비스’입니다. 방문자별 예약 상태, 시간 중복, 결제 성공과 실패, 취소, 개인정보와 문의 대응이 필요해집니다. 화면을 그리는 것만으로 완료를 확인하기 어렵습니다. 첫 버전에서 예약 정보를 직접 받는 대신 일정 안내와 기존 신청 페이지 연결로 시작할 수 있습니다. 같은 주제라도 첫 범위를 작게 바꿀 수 있는 것입니다.

완료 기준과 선택 기능을 나누기

첫 소개 페이지의 완료 기준은 글이 보이고 링크가 열리는 것입니다. 사진, 움직이는 효과, 다크 모드처럼 있으면 좋은 요소는 별도로 적어 둘 수 있습니다. 선택 기능을 넣다가 기본 글이 읽히지 않거나 링크가 사라진다면 첫 목적을 다시 봐야 합니다.

링크 모음도 검색과 추가, 보관이 기본입니다. 항목을 끌어 순서를 바꾸거나 여러 색으로 표시하는 기능은 나중에 더할 수 있습니다. 기능 하나가 추가될 때마다 어떤 행동으로 확인할지 생각합니다. 확인할 방법을 설명하기 어렵다면 아직 요청 범위가 너무 크거나 모호할 수 있습니다.

처음 만든 결과가 예상과 다르다면

완성 예시를 보는 이유

예시는 내 결과와 똑같이 만들기 위한 정답이 아닙니다. 어디까지 만들면 이번 단계를 마쳐도 되는지 보여 주는 기준입니다. 색과 문장이 달라도 목적을 충족하면 됩니다. 결과가 다르다는 이유만으로 계속 처음부터 새로 만들지 않습니다.

앞으로 나오는 설명에서는 이 두 결과물을 반복해서 사용합니다. 매번 새로운 앱을 상상하기보다 익숙한 화면에 개념을 하나씩 연결해 볼 수 있습니다.

작게 만든다고 의미가 작아지는 것은 아닙니다

기능을 줄이는 것을 아이디어를 포기하는 일로 느낄 수 있습니다. 그러나 처음에는 가장 중요한 행동 하나가 실제로 되는지 보는 것이 목적입니다. 사람들이 날짜와 장소를 쉽게 찾을 수 있는지 확인하지 않은 상태에서 복잡한 회원 기능을 붙이면, 정작 필요한 정보가 전달되지 않는 문제를 늦게 발견할 수 있습니다.

작은 첫 버전은 다음 판단의 자료가 됩니다. 안내 페이지를 보여 주었더니 사람들이 위치보다 준비물을 자주 묻는다면, 다음에는 준비물 설명을 앞에 둘 수 있습니다. 검색 기능이 없어도 목록이 다섯 개뿐이라면 당장은 검색이 필요 없을 수도 있습니다. 실제 사용에서 생긴 질문이 다음 기능을 고르는 근거가 됩니다.

예시와 내 결과가 다를 때

예시 페이지의 글꼴이나 간격이 다르다고 내 결과가 실패한 것은 아닙니다. 방문자가 내용을 읽고 목적에 맞는 행동을 할 수 있는지 확인합니다. 반대로 예시와 아주 비슷하게 보여도 버튼이 작동하지 않거나 링크가 틀리면 수정이 필요합니다. 생김새의 유사함과 기능의 완성은 다른 기준입니다.

예시를 복사해 시작했다면 어느 부분을 내 내용으로 바꾸었는지 적어 봅니다. 이름만 바꿨는지, 링크 주소까지 바꿨는지, 불필요한 기능은 뺐는지 확인할 수 있습니다. 예시의 가짜 연락처를 실제 안내처럼 남겨 두지 않는 것도 이때 살필 부분입니다.

“하고 싶은 기능이 많으면 어디에 적어 둘까요?”

현재 만들 기능과 나중에 고려할 기능을 분리해 적을 수 있습니다. 첫 소개 페이지에는 글과 링크만 만들고, 사진·검색·다국어 같은 아이디어는 다음 목록에 둡니다. 적어 둔다고 모두 구현하기로 결정한 것은 아닙니다. 실제로 써 본 뒤 필요한지 다시 판단할 수 있습니다.

각 아이디어 옆에는 어떤 불편을 해결하는지 한 문장으로 적습니다. ‘멋져 보여서’만으로 추가하려는 기능과 방문자가 실제 정보를 찾지 못해서 필요한 기능을 구분하기 쉬워집니다. 예를 들어 자료가 다섯 개일 때는 검색이 없어도 충분할 수 있지만, 수십 개로 늘어나면 찾는 기능이 중요해질 수 있습니다.

나중 목록은 지금의 완료를 방해하지 않도록 둡니다. 첫 목표가 끝났는데 계속 새 기능이 떠오른다는 이유로 미완료라고 부르지 않아도 됩니다. 현재 범위를 마치고 다음 범위를 새로 정하는 방식이 작은 성공을 쌓는 데 도움이 됩니다. 이때 잘 작동한 결과를 보관하는 습관이 두 작업 사이의 경계를 만들어 줍니다.

꼭 기억하세요

첫 프로젝트는 기능이 많은 것보다, 목적이 분명하고 내가 결과를 확인할 수 있는 것이 적합합니다.