안녕하세요, H:Dev+ 팀입니다. 로그인 화면에 "Google 계정으로 이용하기" 버튼, 보신 분들 계실 텐데요. H:Dev+에 구글 로그인(OAuth) 연동 기능이 추가되었습니다. 이번 글에서는 이 기능이 왜 필요한지, 그리고 여러분의 서비스에 어떻게 붙이는지 안내해 드립니다.
회원가입 한 줄이 이탈로 이어지는 이유
이메일과 비밀번호를 새로 만들어야 하는 회원가입 폼은 생각보다 큰 진입 장벽입니다. 비밀번호를 또 하나 기억해야 한다는 부담, 이메일 인증을 기다려야 하는 시간이 사용자를 돌아서게 만듭니다. 구글 로그인은 이미 로그인돼 있는 구글 계정으로 버튼 한 번만 누르면 끝나기 때문에, 이 장벽을 없애는 가장 확실한 방법 중 하나입니다. 특히 MVP를 빠르게 검증해야 하는 스타트업이나, 운영 리소스가 부족한 소규모 팀일수록 회원가입 단계의 마찰을 줄이는 일이 더 중요합니다.
H:Dev+에서는 어떻게 동작하나요
H:Dev+의 구글 로그인은 테넌트별로 자신의 구글 앱을 직접 연결하는 방식(BYO, Bring Your Own)입니다. 그래서 사용자가 구글 로그인 동의 화면을 볼 때 H:Dev+가 아니라 여러분의 서비스 이름이 표시됩니다. 설정은 세 단계입니다.
- Google Cloud Console에서 OAuth 2.0 클라이언트(웹)를 만들고, 승인된 리디렉션 URI에 콜백 페이지 주소를 등록합니다.
- H:Dev+ 관리 콘솔의 System > Settings에서 'Google 로그인' 카드에 발급받은 Client ID와 Secret을 저장합니다.
- 로그인 폼에
h-btn-sign-in-google클래스를 가진 버튼 하나를 추가합니다.
이게 끝입니다. 일반 로그인과 똑같은 데이터 식별자(SIGN_IN)를 그대로 쓰기 때문에 백엔드 쪽에서 새로 만들어야 할 코드가 없습니다. 로그인 폼과 구글 인증이 끝난 뒤 돌아오는 콜백 페이지 모두 같은 구조의 폼 하나로 처리되고, 로그인 성공 시 구글 이메일로 기존 회원을 찾거나, 없으면 새 회원으로 자동 가입 처리됩니다.
보안도 챙겼습니다. 콘솔에 저장한 Client Secret은 테넌트마다 다른 키로 암호화되어 저장되고, 로그인 처리에 필요한 순간에만 복호화해서 사용합니다. 저장한 뒤에는 콘솔 화면에도 원문이 다시 표시되지 않고 마지막 4자리만 보이며, 서버 로그에도 값이 가려진 채로 남습니다.
설정할 때 주의할 점
설정할 때 가장 많이 걸리는 부분은 리디렉션 주소입니다. Google Cloud Console에 등록하는 승인된 리디렉션 URI와 H:Dev+ 로그인 폼에 넣는 콜백 주소는 문자 하나까지 정확히 일치해야 합니다. 다르면 구글 쪽에서 redirect_uri_mismatch 오류를 돌려줍니다. 또 콘솔에 Client ID·Secret을 아직 저장하지 않은 테넌트에서 버튼을 누르면 "구글 로그인이 설정되지 않았다"는 안내를 받게 되니, 운영 전에 설정이 저장됐는지 한 번 더 확인해주세요.
지금 바로 적용해보세요
이미 H:Dev+로 서비스를 운영 중이시라면, 로그인 폼에 버튼 하나 추가하는 것만으로 구글 로그인을 켤 수 있습니다. 설정 방법과 전체 코드 예시는 H:Dev+ 구글 로그인 문서에서 확인하실 수 있습니다.