6. 웹페이지와 웹 앱의 차이
주소를 열었을 때 만나는 화면
브라우저는 인터넷의 문서와 화면을 열어 보는 프로그램입니다. 크롬, 엣지, 사파리가 그 예입니다. 주소를 열어 보는 문서 하나를 웹페이지라고 하고, 관련된 페이지들이 모여 하나의 목적을 이루는 곳을 웹사이트라고 부릅니다. 소개 화면과 활동 기록, 연락 안내가 각각 있어도 모두 같은 사람의 웹사이트에 속할 수 있습니다. 한 페이지만으로 이루어진 사이트도 있습니다.
웹 앱은 브라우저에서 사용자의 입력을 받아 일을 처리하는 프로그램을 말할 때 쓰는 표현입니다. 링크를 검색하거나, 일정에 할 일을 추가하거나, 숫자를 넣어 결과를 계산하는 화면을 떠올리면 됩니다. 화면을 읽는 데서 더 나아가 사용자가 어떤 일을 수행한다는 점에 초점을 둔 말입니다.
둘 사이에 딱 잘린 선은 없습니다
웹페이지에 버튼 하나가 생겼다고 갑자기 전혀 다른 종류의 것이 되는 것은 아닙니다. 읽는 기능과 사용하는 기능은 한 사이트 안에 함께 있을 수 있습니다. 온라인 서점의 책 소개는 정보를 보여 주고, 검색과 장바구니는 사용자의 입력에 따라 달라집니다.
이번 책도 먼저 소개 페이지를 만든 뒤, 링크 추가와 검색이 가능한 작은 웹 앱으로 넘어갑니다. 출발은 간단한 화면이지만 뒤에서는 입력과 저장도 다룹니다. 책 제목에 웹페이지가 들어 있다고 해서 글만 배치하고 끝나는 것은 아닙니다.
별명과 소개글을 읽고, 정해 둔 주소로 이동합니다.
링크를 추가하고 이름으로 찾아 목록의 변화를 봅니다.
스마트폰 앱과의 관계
휴대전화의 브라우저에서 연 웹페이지는 여전히 웹입니다. 휴대전화에서 보인다는 이유만으로 앱 스토어에서 설치하는 스마트폰 앱이 되는 것은 아닙니다. 일부 웹 앱은 홈 화면에 추가해 사용할 수도 있지만, 설치 방식이나 기기 기능을 쓰는 방법은 별도 주제입니다.
이 책에서는 컴퓨터와 휴대전화의 브라우저에서 읽고 사용할 수 있는 화면을 만듭니다. 앱 스토어 등록, 휴대전화 알림, 카메라 권한 같은 기능을 만드는 과정은 포함하지 않습니다. 화면 크기가 바뀌어도 읽고 누를 수 있게 만드는 데 집중합니다.
화면 뒤에서 하는 일을 생각하기
겉모습이 비슷해도 필요한 작업은 다를 수 있습니다. 이메일 주소를 글로 보여 주는 것과, 방문자가 입력한 이메일을 저장하는 것은 다릅니다. 전자는 내용을 표시하는 일이고, 후자는 자료를 받아 보관하고 관리하는 일까지 포함합니다.
따라서 AI에게 부탁할 때 ‘앱처럼 만들어 줘’라는 이름만 전달하기보다 방문자가 무엇을 하는지 설명하는 편이 좋습니다. ‘내가 입력한 링크를 이 브라우저에서 찾아볼 수 있게’라는 설명은 ‘링크 앱’보다 저장 범위까지 분명합니다. 용어의 경계를 외우기보다 실제 행동과 자료의 흐름을 보는 것이 이번 책에 더 필요합니다.
링크 모음이 웹 앱이 되는 이유
종이에 링크 목록을 적으면 내용은 읽을 수 있지만 단어로 자동 검색하거나 항목을 입력해 더하는 동작은 일어나지 않습니다. 웹의 링크 모음에서는 입력한 글을 프로그램이 처리하고 화면을 바꿉니다. 이때 읽기만 하던 사람이 직접 쓰는 사람이 됩니다.
그렇다고 모든 웹 앱이 별도 서버에 자료를 저장해야 하는 것은 아닙니다. 이번 링크 모음처럼 현재 브라우저의 자료만 다룰 수도 있습니다. 자료가 어디에 남는지는 구현 방식과 설정에 따라 다릅니다. 웹 앱이라는 이름만 보고 회원가입이나 여러 기기 동기화를 기대하면 안 되는 이유입니다.
웹 앱에 로그인이 필요할까요?
같은 화면, 다른 약속
‘문의하기’라는 버튼이 두 페이지에 있다고 해 봅시다. 한쪽은 이메일 작성 화면으로 이동하고, 다른 쪽은 입력한 문의를 서비스에 저장합니다. 방문자에게는 비슷해 보여도 두 번째는 문의가 실제로 접수됐는지, 누가 읽는지, 언제 지우는지까지 정해야 합니다. 예쁜 입력칸을 그리는 것과 문의를 운영하는 기능을 갖추는 것은 서로 다른 범위입니다.
이번 소개 페이지에서는 안내 링크를 여는 데서 시작하므로, AI에게 ‘문의가 접수된 것처럼 보이는 가짜 성공 화면’을 만들게 하지 않습니다. 아직 자료를 보내는 기능이 없으면 없다고 알려야 합니다. 링크 모음에서도 저장 위치를 현재 브라우저라고 설명합니다. 작은 화면이라도 사용자에게 약속한 일을 실제로 하는지 보는 기준은 그대로 적용됩니다.
정보가 바뀌는 네 가지 상황
웹 화면의 내용이 바뀌는 이유를 나누어 보면 웹 앱의 동작을 이해하기 쉽습니다.
- 소개글 수정만든 사람이 소개글을 고쳐 새 파일을 올린 경우입니다.
- 검색 결과 변경방문자가 검색어를 입력해 같은 목록 중 일부만 보게 된 경우입니다.
- 새 항목 추가방문자가 새 항목을 넣어 자료 자체가 늘어난 경우입니다.
- 외부 정보 받기다른 서비스에서 새로운 정보를 받아 온 경우입니다.
화면에서 보이는 변화는 비슷해도 필요한 처리는 서로 다릅니다.
이번 소개 페이지는 주로 첫 번째에 해당합니다. 내가 문장을 고치고 결과를 확인합니다. 링크 모음에서는 두 번째와 세 번째를 다룹니다. 목록 안에서 찾고, 내가 입력한 항목을 더합니다. 다른 서비스의 최신 정보를 자동으로 가져오는 기능은 이번 첫 버전의 필수 요소가 아닙니다. 이 차이를 알면 AI가 불필요한 외부 연결을 제안할 때 질문할 기준이 생깁니다.
홈페이지라는 말을 들었을 때
일상에서는 홈페이지라는 말을 사이트 전체를 뜻할 때도, 첫 화면만 뜻할 때도 씁니다. 대화 상대에 따라 의미가 달라질 수 있으므로, AI에게 요청할 때는 ‘한 페이지’인지 ‘여러 페이지’인지 덧붙이면 좋습니다. 첫 소개 화면만 필요한데 소개·활동·문의·로그인 화면이 모두 생기는 일을 줄일 수 있습니다.
메뉴가 있다고 반드시 여러 파일로 나뉘는 것은 아닙니다. 같은 페이지의 아래쪽 위치로 이동하는 메뉴도 있습니다. 반대로 겉모습이 이어져 보여도 주소와 내용이 바뀌는 여러 화면일 수 있습니다. 초보자는 파일 개수부터 결정하기보다, 방문자가 어느 순서로 어떤 내용을 보는지 먼저 설명하면 됩니다.
기능을 말로 설명하는 연습의 예
‘북마크 앱을 만들고 싶다’는 문장은 방향을 알려 줍니다. 여기에 ‘내가 이름과 주소를 넣으면 목록에 추가되고, 이름 일부를 입력해 찾을 수 있으며, 이 브라우저에서 다시 열면 남는다’를 더하면 실제 행동이 드러납니다. 어떤 기술을 사용할지는 아직 몰라도 기능의 범위는 설명할 수 있습니다.
나중에 ‘친구와 같은 목록을 함께 보고 수정한다’를 더하면 요구가 바뀝니다. 각자의 브라우저에만 저장해서는 같은 자료를 공유할 수 없을 수 있습니다. 화면 이름보다 자료와 사용자의 관계를 설명하는 것이 중요한 이유가 여기에도 있습니다. 우리는 우선 한 사람과 한 브라우저의 범위에서 배우고, 확장이 필요해질 때 달라지는 점을 알아봅니다.
“웹 앱이면 반드시 로그인이 있어야 하나요?”
로그인은 사용자를 확인하는 과정의 일부입니다. 모든 웹 앱이 사용자별 비공개 자료를 다루는 것은 아니므로 로그인 없이 사용할 수 있는 도구도 있습니다. 간단한 계산기나 공개된 목록의 검색처럼 사용자의 계정을 알아야만 할 수 있는 일이 아닐 수 있습니다.
이번 링크 모음은 현재 브라우저의 자료를 다룹니다. 그래서 로그인 없이도 입력과 검색을 경험할 수 있습니다. 다만 이 방식으로 다른 기기에서 같은 자료를 자동으로 보거나 여러 사람의 비공개 자료를 안전하게 나누어 보관할 수 있다고 말해서는 안 됩니다. 로그인 유무와 자료의 위치, 접근 권한을 함께 생각해야 합니다.
기능을 추가할 때는 ‘다른 앱에 있으니 필요하다’보다 어떤 사용자 정보를 구분하려는지 질문합니다. 구분할 필요가 없다면 첫 버전에서 빼고 시작할 수 있습니다. 필요가 생기면 화면 하나를 추가하는 수준으로만 생각하지 않고 사용자 확인과 자료 보호의 범위를 별도로 검토합니다.
꼭 기억하세요
웹페이지는 화면과 문서에, 웹 앱은 사용자가 수행하는 기능에 초점을 둔 말입니다. 이번 책에서는 둘을 자연스럽게 이어서 배웁니다.