로그인 만들기
방문자가 들어오는 사이트에서 한 걸음 더 나아가, 이제 내 회원을 받는 로그인 기능을 붙입니다. 이메일 로그인과 구글 로그인 같은 방식을 비교하고, AI에게 어떻게 요청해 붙이는지 순서대로 설명합니다. 로그인이 왜 앞 단계보다 까다로운지도 비개발자 눈높이로 풀어드립니다.
로그인이 되는 내 사이트
예상 소요 시간 약 40분 · 코딩 지식 없이 따라할 수 있어요
앞 글에서 방문자가 얼마나 들어오는지 보는 눈을 달았습니다. 지금까지는 누구나 와서 둘러보고 떠나는 사이트였습니다. 이번에는 한 걸음 더 들어갑니다. 그냥 지나가는 손님이 아니라, 이름을 남기고 다시 찾아오는 내 회원을 받는 단계입니다.
로그인은 무엇을 붙이는 일인가요
로그인을 붙인다는 것은 사이트에 두 가지를 더하는 일입니다. 하나는 처음 오는 사람이 자기 정보를 등록하는 회원가입이고, 다른 하나는 이미 등록한 사람이 자기임을 확인받고 들어오는 로그인입니다. 이 둘이 합쳐지면 사이트는 지금 화면을 보는 사람이 누구인지 구분할 수 있게 됩니다.
사람을 구분할 수 있게 되면 할 수 있는 일이 늘어납니다. 회원에게만 보이는 페이지를 만들거나, 로그인한 사람의 이름을 화면 위에 띄우거나, 각 회원이 남긴 내용을 따로 보관할 수 있습니다. 다음 글에서 다룰 데이터 저장하기도 사실은 이 로그인 위에서 더 단단해집니다.
방식 고르기: 이메일 로그인과 소셜 로그인
로그인을 붙이기 전에 어떤 방식으로 받을지 먼저 정해야 합니다. 크게 두 갈래입니다. 이메일과 비밀번호를 직접 받는 방식과, 구글이나 카카오 같은 기존 계정을 빌려 쓰는 소셜 로그인입니다. 둘은 회원 입장의 편함과 만드는 쪽의 손이 서로 다릅니다.
- 회원이 이메일과 비밀번호를 직접 입력해 가입합니다.
- 다른 회사에 기대지 않고 내 사이트 안에서 끝납니다.
- 비밀번호를 잊었을 때 재설정 메일 같은 추가 처리가 필요합니다.
- 가입 화면에 입력칸이 많아 회원이 조금 번거롭게 느낄 수 있습니다.
- 이미 쓰는 구글 계정 버튼 한 번으로 가입과 로그인이 끝납니다.
- 비밀번호를 따로 만들 필요가 없어 회원이 편합니다.
- 구글 쪽에 사이트를 등록하는 사전 연동 설정이 한 번 필요합니다.
- 회원이 해당 계정을 가지고 있어야만 쓸 수 있습니다.
처음에는 둘 중 하나만 골라도 충분합니다. 가장 부담 없는 출발은 구글 로그인 하나만 붙이는 것입니다. 회원은 버튼 한 번이면 되고, 비밀번호 분실 처리 같은 일을 신경 쓰지 않아도 됩니다. 나중에 이메일 로그인을 더 붙이는 것도 얼마든지 가능합니다.
AI에게 로그인을 붙여 달라고 요청하기
방식을 정했다면 AI에게 말로 요청합니다. 한 번에 다 만들려 하지 말고, 어떤 방식인지와 로그인한 뒤 무엇이 달라지는지를 함께 알려주는 것이 좋습니다. 아래처럼 풀어서 요청하세요.
내 사이트에 회원가입과 로그인 기능을 붙여줘.
구글 계정으로 로그인하는 방식으로 해줘.
로그인하면 화면 위에 그 사람 이름이 보이고, 로그아웃 버튼도 같이 보이게 해줘.
로그인 안 한 사람에게는 로그인 버튼이 보이게 해줘.- 1방식 정하기이메일과 소셜 로그인 중 어떤 방식으로 받을지 먼저 결정합니다.
- 2AI에게 요청고른 방식과 로그인 후 달라질 화면을 함께 말로 설명합니다.
- 3연동 설정구글 같은 외부 계정을 쓴다면 그쪽에 사이트를 등록하고 연결 정보를 받아 넣습니다.
- 4직접 로그인 테스트실제로 가입과 로그인을 해보고, 로그아웃 뒤 다시 들어가지는지 확인합니다.
왜 로그인부터 갑자기 어려워지나요
여기서부터 체감 난이도가 한 단계 올라갑니다. 앞 단계까지는 화면을 바꾸는 일이라 결과가 눈에 바로 보였습니다. 로그인은 다릅니다. 사람을 구분하고 본인임을 확인하는 일이라, 화면 뒤에서 보안과 계정 연결이라는 보이지 않는 부분이 함께 움직입니다. 비밀번호를 안전하게 보관하고, 지금 접속한 사람이 진짜 그 회원이 맞는지 계속 확인하는 일이 자동으로 따라붙기 때문입니다.
특히 구글 로그인 같은 외부 계정을 쓸 때, 구글 쪽 설정 화면에서 한참 막히는 순간이 옵니다. 내 사이트 주소를 등록하고 연결용 정보를 받아 넣는 과정인데, 낯선 용어가 가득한 화면에서 어디에 무엇을 넣어야 할지 막막해집니다. 거의 모두가 이 지점에서 한 번은 멈춥니다. 잘못된 것이 아니라 원래 한 번은 손이 가는 부분입니다.
그리고 로그인을 시험하다 보면 빨간 글씨의 영어 에러 메시지가 화면에 뜨는 순간이 옵니다. 무슨 뜻인지 한눈에 안 들어와 가슴이 철렁합니다. 이 막막함은 거의 모든 사람이 겪는 통과의례에 가깝습니다. 영어 문장을 몰라도 괜찮습니다. 그 메시지를 그대로 복사해 AI에게 보여주면 됩니다.
로그인하려고 하니까 이런 메시지가 떴어. 무슨 뜻이고 어떻게 고치면 되는지 알려줘.
(여기에 화면에 뜬 영어 메시지를 그대로 붙여넣기)정리
이번 단계로 사이트는 단순히 보여주기만 하던 곳에서, 사람을 구분하고 회원을 받는 곳으로 바뀌었습니다. 방식은 처음엔 하나만 골라도 충분하고, 구글 로그인이 가장 부담이 적은 출발입니다. 연동 설정과 영어 에러 앞에서 멈추는 것은 이상한 일이 아니라 누구나 지나는 길목입니다. 막힌 화면과 메시지를 그대로 AI에게 보여주는 습관만 있으면 됩니다.
- 로그인은 회원가입, 로그인, 로그아웃 세 가지를 함께 붙이는 일입니다.
- 이메일 방식은 내 사이트 안에서 끝나고, 소셜 방식은 외부 계정을 빌려 더 편합니다.
- 처음에는 구글 로그인 하나만 붙여도 충분합니다.
- 연동 설정과 영어 에러에서 막히는 것은 누구나 겪는 자연스러운 과정입니다.
- 다음 글에서는 이 회원들이 남기는 내용을 사이트에 저장하는 법을 다룹니다.