사람을 들이다 — 회원이라는 두 번째 문

방을 다 열었습니다. 진단, 지식, 교육, 블로그. 이제 이 집을 둘러본 사람이 머물 수 있게 할 차례입니다. 그게 회원이라는 두 번째 문입니다.

둘러보는 사람에서, 머무는 사람으로

처음 온 사람은 방을 둘러봅니다. 그런데 진단 결과를 저장하고, 자기 보고서를 다시 보고, 관심 글을 모으려면 자기 공간이 필요합니다.

그래서 회원이라는 문을 달았습니다. 로그인하면 마이페이지(mypage)가 열립니다. 회원은 두 등급 — 일반 회원과 보고서 고객으로 나뉩니다.

보고서 고객은 가입 이메일이 자동으로 자기 보고서와 매칭됩니다. 3편의 진단·보고서 탭에서 만든 결과가, 회원이 되면 자기 계정에 연결되는 지점입니다.

이 문을 만든 두 사람

회원 문을 열기로 하고, 저는 터미널에서 Evan과 Riley를 불렀습니다. 백엔드는 연구소 개발 팀장 Evan에게, 빌드·배포는 개발팀 수석 Riley에게 맡기고, 저는 그 문이 라이브에 붙는 현장에 직접 붙어 있었습니다.

바이브 코딩의 생생한 밤

회원 문을 다는 동안, 진짜 바이브 코딩다운 일들이 벌어졌습니다.

시크릿 창으로 비번을 뚫다. 인증 서비스(Supabase)에 비밀번호를 설정하려는데, 브라우저 자동완성이 자꾸 입력칸을 덮어써 엉뚱한 값이 들어갔습니다.

한참 헤맸습니다. 그러다 자동완성이 없는 시크릿 창에서 하니 한 번에 됐습니다. 코드 문제가 아니라 브라우저 습관이 범인이었습니다.

"안 뜸"을 캐시로 규명하다. 새로 만든 화면이 브라우저에서 안 보였습니다. "코드가 틀렸나?" 싶었지만, 서버의 새 파일은 정상이었습니다.

범인은 브라우저가 옛 화면을 캐시해 보여준 것이었습니다. 캐시를 우회해 직접 받아보니 코드는 멀쩡했습니다. 바이브 코딩에서 가장 흔한 함정 — 내가 틀린 게 아니라 캐시가 옛것을 보여준 순간입니다.

우측 드로어를 좌측으로. 모바일 메뉴를 처음엔 화면 오른쪽에서 밀려나오게 만들었습니다. 그런데 제가 짚었습니다 — 표준 모바일 패턴은 왼쪽이라고.

햄버거 버튼을 누르면 왼쪽에서 슬라이드되도록 고쳤습니다. 작지만, '사용자 경험'을 아는 사람이 짚어준 디테일입니다.

버그의 절반은 코드가 아니라, 캐시·자동완성·습관 같은 '코드 바깥'에 있다.— 회원 문을 달며 배운 것

이 회원 문은 앞선 작업들 위에 얹혔습니다. 첫 배포 때 올린 113개 파일, 라이브 직전 심은 분석 태그 103개 페이지, 그리고 이제 2개 등급의 회원 시스템 — 한 층씩 쌓여 집이 사람을 들일 준비를 마쳤습니다. 전부 외주 없이, 저와 개발팀의 손으로.

이제 집도 짓고, 방도 다 열고, 사람도 들였습니다. 다음 편은 마지막 — 그래서 이 모든 것이 무엇이었나입니다. 웹에이전시 홈페이지는 왜 죽고, ANC 기반 홈페이지는 왜 살아있는지. 그리고 이 모든 게 가능했던 이유, 저와 ANC로 착지합니다.

자주 묻는 질문

회원이 되면 무엇이 달라지나요?

로그인해 자기 공간(mypage)을 갖게 됩니다. 일반 회원과 보고서 고객 두 등급이 있고, 보고서 고객은 가입 이메일이 자동으로 자기 보고서와 매칭됩니다. 진단·보고서 탭에서 만든 결과를 자기 계정과 연결해 관리하는 식으로 확장됩니다.

회원 시스템은 어떻게 만들었나요?

Supabase라는 인증 서비스를 붙여 가입·로그인·세션을 구현했습니다. 외주가 아니라 제가 개발팀(Evan·Riley)과 직접 만들었고, 그 과정에서 비밀번호가 자동완성에 덮이는 문제는 시크릿 창으로, 화면이 안 뜨는 문제는 브라우저 캐시 때문임을 규명해 해결했습니다.

'안 뜸'을 캐시로 규명했다는 게 무슨 뜻인가요?

새로 만든 화면이 브라우저에서 안 보였는데, 서버에는 새 파일이 정상이었습니다. 원인은 브라우저가 옛 화면을 캐시(임시 저장)해 보여준 것이었습니다. 캐시를 우회해 직접 받아보니 코드가 정상임을 확인했습니다. 바이브 코딩에서 흔한 '내 코드가 틀린 게 아니라 캐시가 옛것을 보여준' 순간입니다.

이 회원 노하우도 고객사에 쓰이나요?

그렇습니다. 회원 가입·로그인·인증·자기 공간(마이페이지)은 거의 모든 비즈니스 홈페이지에 필요합니다. 우리가 직접 붙여보며 겪은 인증·캐시·모바일 메뉴 문제는, 고객사 홈페이지에 회원 시스템을 붙일 때 그대로 노하우가 됩니다.