AI로 홈페이지 회원가입/로그인 만들기

이제부터는 본격적인 홈페이지 동적 기능을 만들 차례입니다.
홈페이지 개발과정에 가장 먼저 구현해야 하는 것은 무엇일까요?

개발자마다 의견이 분분할 수 있지만 저는 '회원가입/로그인' 기능이라 생각하는데요.
해당 기능이 먼저 구현되야 글 작성할 때 사용자 이름이 자동 기록되는 등 연결이 수월해서입니다.

그런데 아주 중요한 주의사항이 있어요. 바로 '개인정보보호법'입니다.
바이브 코딩으로 기능을 만들어 보실 분은 정신을 똑바로 차리고 잘 보셔야 합니다.

무엇이 중요한가요?

홈페이지에서 실명, 연락처 등 개인정보를 입력받게 되면 법적으로 그 정보를 보호해야 할 의무가 생기는데요.
우선 기본적으로 사용자의 가입정보를 다른 사람에게 고의로 유출해서는 안됩니다.
과징금이나 과태료가 부과될 수 있어요.

그리고 혹시 서버가 해커에게 털리더라도 사용자의 비밀번호를 볼수 없게 암호화 저장하는 것도 의무입니다.

이쪽으로는 어느정도 IT 지식을 쌓아야 대처가 가능하기에
여기서는 아이디, 닉네임, 패스워드, 자기소개 정도만 입력받으려 합니다.
연습을 하신다 생각하시고 개인정보를 아예 입력하지 않는 방향으로 진행하겠습니다.

오늘의 IT 지식 - 데이터베이스

회원정보를 보관하려면 데이터베이스를 사용해야 합니다.
데이터베이스란 마치 표로 구성된 여러개의 시트를 갖는 엑셀파일과 비슷한데요.

사용하기 쉬운 데이터베이스 중에는 sqlite(에스큐엘라이트) 라는게 있습니다.
이걸로 진행할 겁니다.Winfsurf 에 아래와 같이 지시하겠습니다.

회원가입/로그인을 만드려고 해. 
가입항목은 아이디, 비밀번호, 닉네임, 자기소개로 제한해 만들어줘,
데이터 베이스는 sqlite, 백앤드는 PHP 를 사용하고 db/sqlite.db 파일이 자동 생성되게 해.
SQL Injection 해킹 방지 기능도 넣어줘.

'SQL Injection이 무언가요?'

좋은 질문입니다. SQL Injection(에스큐엘 인젝션)은 회원가입이나 로그인, 글쓰기 등의
기능을 갖는 홈페이지에서 해커가 악용하는 해킹 기술중 하나입니다.
차마 해킹 기술을 가르켜 드릴순 없으니 그건 양해하시고요 ㅎㅎ..

해커는 정상적이지 않은 사용법으로 홈페이지의 사용자 정보를 빼내거나 본인의 캐시금액을 충전하는 등의 기술을 사용할 수 있습니다.
그걸 가능한 막는 거지요. 바이브 코딩은 간혹 보안이 허술해서 이런 지시를 안해주면 해커에게 당하기 쉬운 허술한 구조로 코드를 만듭니다.

작업이 끝났습니다.
아래와 같이 안내를 해주네요.

사용 방법
웹서버에서 HappyBooks5 사이트에 접속합니다
/register.php
에서 회원가입 후
/login.php
에서 로그인하여 사용

음, 그런데 홈페이지 상단에서 연결을 해줄 것으로 예상했는데 빠뜨려서 추가로 프롬프트를 날렸습니다.

메인 페이지에 연결해줘. 
로그인 왼쪽에 회원가입도 추가해주고, 만약 로그인 상태라면 회원아이디와 닉네임을 그 위치에 보여줘

잠시 후 회원가입 링크로 생기고,

회원가입을 클릭하니 현재 디자인과 동떨어진 느낌입니다.

Windsurf 에디터를 재실행해 그런 것인데요 아래 지시를 해주고 나니

회원가입, 로그인 페이지도 tailwind css 를 이용해 예쁘게 꾸며주

완전 딴판입니다. 만족스럽네요.

대랙적인 정보를 넣고 회원가입을 해보면,

회원가입이 잘 되었다고 나옵니다.

그리고 이어서 로그인을 해보니

헉, 이 부분은 디자인을 빠뜨렸네요.

페이지 제목이 '내 프로필'이니 아래와 같이 프롬프트를 날리겠습니다.

내 프로필 페이지도 디자인을 예쁘게 해줘

이미 앞에서 tailwind css 를 이야기했기에 생략해도 됩니다.

작업 완료 후 새로 고침하니 와우~ 아래와 같은 결과가 나왔군요.

아이고, 나의 도서, 찜 목록, 계정 설정 탭을 추가했네요. 기능은 없지만요.
클로드는 너무 똑똑해서 시키지 않은 일도 간혹 해놓습니다.
뭐 지워달라면 되니 걱정은 없습니다. 로그아웃 버튼도 확인하니 잘 작동합니다.

일반적인 홈페이지 기준으로 몇가지 누락된게 있는데요.
회원가입 페이지에 패스워드 기준이 없고,
동일 아이디로 가입을 시도하면 오류가 나지만 왜 오류가 났는지 일반 사용자가 알 수 없는 문제가 있었습니다.

그래서 아래와 같이 추가 지시를 하니 해결되었습니다.

회원가입 페이지에 패스워드 중복 확인 기능을 추가해줘

비밀번호가 틀리면 바로 빨간색으로 보여줘

아이디 중복확인 기능을 넣고 중복이 아닐 때만 가입되도록 해줘.

 

이런 방식으로 기능을 꼼꼼하게 확인하며 자연어를 이용하여 기능을 추가하면 회원가입/로그인 기능 완성 ~ !

db 내용을 보고 싶어요!

데이터베이스는 엑셀과 비슷하다고 했었는데요.
엑셀 파일을 보려면 엑셀 프로그램이 있어야 하듯이 sqlite.db 파일을 보시려면 sqlite.db 파일을 보는 프로그램이 있어야 합니다.

Windsurf 내에서 sqlite3 Editor 확장 프로그램을 설치하면 됩니다.
1) 확장 프로그램 탭을 선택
2) sqlite3 으로 검색합니다.
3) SQLite3 Editor 를 찾아 설치(Install)해주면 되는데요.

설치를 마치고 난 다음
1) 다시 Explore 탭 선택
2) sqlite.db 파일을 선택하면
3) 회원 가입 내역을 자세히 보실 수 있습니다.

테이블 ( 엑셀로 비유하자면 시트 ) 이름은 'users'로 알아서 지었네요.
이렇게 sqlite 데이터를 들여다 볼 수 있어 차후 용이하게 수정할 수 있습니다.
나중에 구조를 수정할 일도 생길수 있는데요. ( 회원가입 항목에 생일을 넣어달라거나.. )
그건 복잡하니 차후를 기약하도록 하겠습니다.

아직 끝난게 아닙니다.
한가지 더 중요한 보안 처리를 해야 합니다.

IT 지식2. 다운로드 금지 정책 파일

지금 추가한 sqlite.db 파일에는 회원정보가 들어있는데요.
비록 실명 정보는 아니더라도 다운로드가 안되게 해야 합니다.
왜냐하면 이 파일명을 유추할 수 있는 어떤 해커가 https://홈페이지주소/db/sqlite.db 라고 입력하면 파일을 그냥 다운로드해서 가져갈 수 있거든요.

그래서 파일을 다운로드하지 못하게 보안 정책을 추가해야 합니다.
채팅 프롬프트에 아래와 같이 입력하면 되는데요.

db 폴더의 파일을 다운로드 못하게 정책 파일을 추가해줘.

잠시 기다리면 db 폴더에 이런 파일이 생깁니다.

이 파일이 바로 다운로드를 막는 정책 파일인데요.
https://홈페이지주소/db/sqlite.db 라고 입력하더라도 파일을 다운로드하지 못하는걸 확인할 수 있습니다.
( 금지 – 이 리소스에 접근 권한이 없습니다. )

오늘 결과물은 아래 URL에서 확인해보실 수 있습니다.

https://cray7.mycafe24.com/HappyBooks5/

바이브 코딩만으로 회원가입 / 로그인 기능을 간단히 붙여보았습니다.

그냥 db/sqlite.db 에 회원가입 / 로그인 기능 붙여달라해도 알아서 해주긴 하는데요.

회원 가입 항목으로 어떤 항목을 사용하는지 조목 조목 나는 '알고 있어야' 합니다.
인공지능이 하는데로 그냥 모두 맡겨 버리면 나중에 낭패를 볼 수 있습니다.

아무쪼록 필요하신 분께 도움이 되셨을까요?
방문해주신 모든 분들께도 감사! 드립니다!