회원가입 및 로그인

회원가입 및 로그인

Skillnote는 Google, GitHub, 이메일 세 가지 방법으로 가입하고 로그인할 수 있습니다. 로그인이 필요한 페이지에 접근하면 로그인 모달이 자동으로 나타납니다.


로그인 모달 열기

로그인 모달은 다음 상황에서 자동으로 나타납니다.

  • 게시물 작성, 복습 등 로그인이 필요한 페이지에 접근할 때
  • 사이드바 하단 프로필 영역을 클릭할 때

모달 상단에는 Skillnote 로고와 함께 “더 많은 기능을 이용하려면 로그인하세요” 라는 안내 문구가 표시됩니다.


로그인 / 회원가입 모드 전환

모달 상단의 토글 버튼으로 “로그인”“회원가입” 모드를 자유롭게 전환할 수 있습니다.

  • “로그인” 탭: 기존 계정으로 로그인하는 화면
  • “회원가입” 탭: 새 계정을 만드는 화면

소셜 계정으로 로그인 (로그인 모드에서만 표시)

소셜 로그인 버튼은 로그인 모드에서만 표시됩니다. 회원가입 모드로 전환하면 소셜 버튼은 보이지 않습니다.

Google로 계속하기

  1. 모달에서 “Google로 계속하기” 버튼을 클릭합니다.
  2. Google 계정 선택 화면이 열립니다.
  3. 사용할 Google 계정을 선택하면 자동으로 Skillnote에 로그인됩니다.
  4. 처음 로그인하는 경우 추가 정보 입력 단계로 이동합니다.

팁: Google 계정으로 로그인하면 별도의 비밀번호를 기억할 필요가 없어 편리합니다.

GitHub로 계속하기

  1. 모달에서 “GitHub로 계속하기” 버튼을 클릭합니다.
  2. GitHub 인증 화면이 열립니다.
  3. GitHub 계정으로 인증하면 자동으로 Skillnote에 로그인됩니다.
  4. 처음 로그인하는 경우 추가 정보 입력 단계로 이동합니다.

팁: 개발자라면 GitHub 계정으로 연동하는 것이 자연스럽고 편리합니다.


이메일로 로그인

소셜 버튼 아래 “또는” 구분선 아래에 이메일 로그인 폼이 위치합니다.

  1. 이메일 필드에 가입 시 사용한 이메일 주소를 입력합니다.
  2. 비밀번호 필드에 비밀번호를 입력합니다. 오른쪽 눈 모양 아이콘을 클릭하면 비밀번호를 표시하거나 숨길 수 있습니다.
  3. “로그인” 버튼을 클릭합니다. 처리 중에는 버튼이 “로그인 중…” 으로 변경됩니다.

비밀번호를 잊으셨나요?

로그인 모드에서 “비밀번호를 잊으셨나요?” 링크를 클릭하면 비밀번호 재설정 흐름으로 이동합니다. 자세한 내용은 아래 비밀번호 재설정 항목을 참고하세요.


이메일로 회원가입

모달 상단에서 “회원가입” 탭을 선택하면 이메일 가입 폼이 나타납니다. 회원가입 모드에서는 소셜 로그인 버튼이 표시되지 않습니다.

  1. 이메일 필드에 사용할 이메일 주소를 입력합니다.
  2. 비밀번호 필드에 비밀번호를 입력합니다 (최소 6자 이상). 눈 모양 아이콘으로 비밀번호 표시/숨김을 전환할 수 있습니다.
  3. 비밀번호 확인 필드에 비밀번호를 한 번 더 입력합니다.
  4. “회원가입” 버튼을 클릭합니다. 처리 중에는 “회원가입 중” 으로 변경됩니다.
  5. 이메일 인증 단계로 자동 이동합니다.

이메일 인증

이메일로 회원가입하면 입력한 이메일 주소로 인증 링크가 발송되고, 모달이 다음 화면으로 전환됩니다.

  • 제목: “이메일을 확인해주세요”
  • 안내: “입력하신 이메일로 인증 링크를 보냈습니다. 이메일을 확인하고 링크를 클릭해주세요.”
  • “인증 대기 중…” 스피너가 표시되며 인증 완료를 기다립니다.

인증 완료하기

  1. 받은 이메일에서 인증 링크를 클릭합니다.
  2. 모달의 “인증 완료했어요” 버튼을 클릭합니다. 처리 중에는 “확인 중” 으로 표시됩니다.

인증 이메일 재발송

이메일이 도착하지 않으면 “인증 이메일 재발송” 버튼을 클릭합니다. 재발송 후에는 쿨다운 타이머가 표시되며 (“재발송까지 N초”), 타이머가 끝난 후 다시 재발송할 수 있습니다.

주의: 인증 메일이 보이지 않으면 스팸 또는 프로모션 폴더를 확인해 주세요.


비밀번호 재설정

비밀번호를 잊은 경우 3단계 흐름을 통해 재설정할 수 있습니다.

1단계: 이메일 입력

로그인 모달에서 “비밀번호를 잊으셨나요?” 를 클릭하면 재설정 화면으로 전환됩니다.

  • 제목: “비밀번호 재설정”
  • 안내: “가입에 사용하신 이메일을 입력하세요.”
  • 이메일 주소를 입력하고 “재설정 링크 보내기” 버튼을 클릭합니다. 전송 중에는 “전송 중” 으로 표시됩니다.
  • “로그인으로 돌아가기” 링크를 클릭하면 로그인 화면으로 돌아갑니다.

2단계: 메일 발송 대기

  • 제목: “비밀번호 재설정 메일 발송 완료.”
  • 안내: “해당 이메일로 가입된 계정이 있다면 메일이 발송됩니다.”
  • 부가 안내: “재설정 메일은 24시간 동안 유효합니다.”
  • “인증 대기 중…” 스피너가 표시됩니다.
  • “로그인으로 돌아가기” 버튼과 “인증 이메일 재발송” 버튼이 함께 표시됩니다. 재발송 후에는 “재발송까지 N초” 쿨다운이 적용됩니다.

3단계: 새 비밀번호 설정

이메일의 재설정 링크를 클릭하면 모달이 새 비밀번호 설정 화면으로 전환됩니다.

  • 제목: “새 비밀번호 설정”
  • 안내: “새 비밀번호를 입력해 주세요.”
  • “새 비밀번호” 필드와 “비밀번호 확인” 필드를 입력합니다.
  • “비밀번호 재설정” 버튼을 클릭합니다. 처리 중에는 “재설정 중…” 으로 표시됩니다.

추가 정보 입력 (신규 사용자 필수)

소셜 로그인이나 이메일 인증을 처음 완료한 모든 신규 사용자는 추가 정보 입력 단계를 반드시 완료해야 합니다. 이 단계는 건너뛸 수 없으며, 완료하기 전까지 모달을 닫을 수 없습니다.

  • 제목: “추가 정보 입력”
  • 안내: “스킬노트 서비스를 이용하기 위한 추가 정보를 입력해주세요.”

닉네임

  • 필드명: 닉네임 * (필수)
  • 입력 안내: 닉네임을 입력하세요.
  • 조건: 한글, 영문만 사용 가능 (1~10자)
  • 힌트: “한글, 영문만 사용 가능 (1-10자)“

유저태그

  • 필드명: 유저태그 * (필수)
  • 입력창 앞에 skillnote.io/ 접두사가 고정 표시됩니다.
  • 입력 안내: 유저태그를 입력하세요.
  • 조건: 영문, 숫자, 밑줄(_)만 사용 가능 (3~20자)
  • 힌트: “영문, 숫자, 밑줄(_)만 사용 가능 (3-20자)”
  • 유저태그는 내 블로그 주소(skillnote.io/유저태그)로 사용됩니다.

두 항목을 모두 입력하고 저장하면 Skillnote 이용이 시작됩니다.


로그인 상태 유지

  • 로그인 상태는 브라우저에 자동으로 저장됩니다.
  • 로그인이 필요한 페이지에 접근할 때 로그인 모달이 자동으로 나타나며, 로그인 완료 후 원래 접근하려던 페이지로 자동 이동합니다.
  • 공용 컴퓨터에서 사용한 경우, 이용 후 사이드바 하단 프로필 메뉴에서 반드시 로그아웃하세요.