아임웹 홈페이지 회원가입 설정 - [1탄] 회원가입 및 로그인

아임웹 홈페이지 회원가입 설정 - [1탄] 회원가입 및 로그인

1. 시작하며

웹사이트에서 회원가입 및 로그인 기능은 자주 사용됩니다.
특히, 아임웹 홈페이지에서는 로그인 위젯을 추가하여 손쉽게 회원 시스템을 구현할 수 있습니다.

이번 글에서는 아임웹 홈페이지에서 회원가입 및 로그인 기능을 설정하는 방법을 단계별로 살펴보겠습니다.
이를 통해 방문자와 관리자의 입장에서 각각의 기능이 어떻게 동작하는지 확인할 수 있습니다.






2. 아임웹 회원가입 및 로그인 설정하기

1단계: 로그인/회원가입 버튼 추가하기

아임웹 디자인 모드 > 상단 설정에서 로그인/장바구니 위젯을 추가합니다.
위젯 설정 창에서 로그인 버튼회원가입 버튼을 추가합니다.

로그인/장바구니 위젯 추가
로그인/장바구니 위젯 추가
로그인 버튼과 회원가입 버튼 추가
로그인 버튼과 회원가입 버튼 추가

2단계: 로그인 상태 설정하기

  • 로그인 전: 로그인, 회원가입 버튼 표시
  • 로그인 후: 닉네임, 로그아웃 버튼 표시
💡
참고
아임웹 디자인 모드에서 미리보기를 하면, 관리자로 로그인된 상태이므로 '관리자 | 로그아웃'으로 표시됩니다.
'미리보기'를 통해 확인한 상태
'미리보기'를 통해 확인한 상태





3. 회원가입 및 로그인 기능 테스트

1단계: 크롬 시크릿 모드에서 테스트

크롬 시크릿 창(Ctrl + Shift + N)을 열어 웹사이트에 접속하면 '로그인 | 회원가입' 버튼이 표시됨

크롬 시크릿 창에서 확인
크롬 시크릿 창에서 확인
로그인, 회원가입 버튼이 정상적으로 표시
로그인, 회원가입 버튼이 정상적으로 표시

2단계: 회원가입 과정 확인

회원가입 버튼 클릭 → 모달창으로 약관 동의 화면 표시

약관 동의 내용이 모달창으로 표시
약관 동의 내용이 모달창으로 표시
약관 동의 모달창
약관 동의 모달창
💡
참고
'모달창'이란?
페이지 위에 팝업 형식으로 새로운 창을 띄워 콘텐츠를 보여주는 창

약관 동의 후 회원가입 정보 입력

회원가입 정보 입력창
회원가입 정보 입력창

회원가입 완료 후 우측 상단에 닉네임과 로그아웃 버튼 표시되는지 확인

닉네임과 로그아웃 버튼 표시
닉네임과 로그아웃 버튼 표시

추가 참고 사항

회원가입 창이 모달 형태로 표시되는 이유:
아임웹 공통 디자인 설정에서 '로그인/가입 모달로 사용' 옵션이 활성화되어 있기 때문

아임웹 공통 디자인 설정

해당 옵션을 해제하면 일반적인 회원가입 페이지 형식으로 변경 가능

로그인 메뉴를 사용하여 페이지 형식으로 변경 가능
로그인 메뉴를 사용하여 페이지 형식으로 변경 가능





4. 회원가입 설정 변경하기

1단계: 관리자 페이지에서 회원가입 설정 변경

아임웹 관리자 페이지 이동 후 환경설정 > 회원가입·그룹·등급 메뉴 클릭 > '가입 설정' 탭과 '그룹 및 등급 설정' 탭에서 설정

아임웹 관리자 페이지
아임웹 관리자 페이지

더 자세한 설정은 아임웹 공식 가이드 문서에서 확인 가능합니다.
회원 가입폼과 가입자 유형 설정 방법

2단계: 설정 저장 후 테스트

크롬 시크릿 창에서 설정이 정상 반영되었는지 확인

크롬 시크릿 창에서 설정 확인
크롬 시크릿 창에서 설정 확인





5. 마무리

아임웹 회원가입 및 로그인 기능을 설정하는 방법을 살펴보았습니다.

핵심 요약:

  • 로그인/회원가입 버튼 추가 및 상태 설정
  • 크롬 시크릿 모드에서 회원가입 및 로그인 테스트
  • 회원가입 설정 변경

이제 아임웹에서 회원 시스템을 직접 설정하고 테스트해 보세요.
필요한 설정을 추가하면 더욱 완성도 높은 회원가입 및 로그인 시스템을 구축할 수 있습니다.

[함께 읽으면 좋은 글]

* 아임웹 전문가 포트폴리오 대표이미지 무료 목업 사이트 추천

아임웹 전문가 포트폴리오 대표이미지 무료 목업 사이트 추천 | 아임웹 홈페이지 지식 저장소, 웹카이브
아임웹 포트폴리오 대표 이미지를 손쉽게 제작할 수 있는 무료 목업 사이트 Shots 사용법을 소개합니다. Shots를 활용하여 포토샵 없이 깔끔한 목업 이미지를 만들고, 아임웹 포트폴리오에 적합한 이미지를 생성하세요.

* 홈페이지 내 이미지 출처 표시 방법 (저작권위원회 답변)

홈페이지 내 이미지 출처 표시 방법 (저작권위원회 답변) | 아임웹 홈페이지 지식 저장소, 웹카이브
홈페이지 제작 시 저작권이 있는 이미지의 출처를 적절히 표시하는 방법에 대해 한국저작권위원회의 답변을 바탕으로 안내합니다.

게시글 더보기

아임웹 동영상 위젯 모서리 둥글게 (코드)

아임웹 동영상 위젯 모서리 둥글게 (코드)

1. 시작하며 아임웹으로 홈페이지를 만들다 보면 다양한 위젯을 배치하게 됩니다. 그중에서도 동영상 위젯은 시각적인 정보 전달에 효과적인 요소인데요, 이때 다른 요소들과 조화롭게 보이기 위해서는 디자인 디테일이 매우 중요합니다. 예를 들어 이미지나 버튼은 둥글게 처리했는데, 동영상만 각져 있다면 화면의 전체적인 느낌이 어색해질 수 있습니다. 그래서 이번 글에서는 아임웹 동영상 위젯의 모서리를

아임웹 텍스트가 떠오르는 애니메이션 (코드)

아임웹 텍스트가 떠오르는 애니메이션 (코드)

1. 시작하며 홈페이지를 방문한 첫 순간, 사용자의 이목을 사로잡는 요소 중 하나는 바로 텍스트 애니메이션입니다. 정적인 텍스트보다 살짝 움직이는 텍스트는 훨씬 더 주목받을 수 있으며, 브랜드나 메시지를 자연스럽게 강조하는 데 유용합니다. 이번 글에서는 아임웹을 통해 텍스트 한 줄씩 부드럽게 떠오르는 애니메이션 효과를 구현하는 방법을 안내드립니다. 2. 텍스트가 위로 떠오르는 부드러운

아임웹 라이브 뱃지 만들기 (코드)

아임웹 라이브 뱃지 만들기 (코드)

1. 홈페이지에 ‘LIVE’ 뱃지가 필요한 이유 홈페이지에서 후기나 리뷰를 실시간으로 보여줄 때, 시각적으로 주목받을 수 있는 방법은 매우 중요합니다. 단순한 텍스트보다 시각적으로 강조된 뱃지를 활용하면 사용자의 집중도를 높이고, 정보의 긴급성이나 신뢰도를 효과적으로 전달할 수 있습니다. 실시간 후기, 라이브 상담, 긴급 공지, 한정 이벤트와 같이 현재 진행 중인 정보를 보여줄 때

아임웹 입력폼 개인정보수집동의 숨기기

아임웹 입력폼 개인정보수집동의 숨기기 (코드)

1. 시작하며 아임웹에서 입력폼을 통해 고객의 개인정보를 수집하거나 제3자에게 제공하는 경우, 반드시 관련 동의 항목을 명시해야 합니다. 하지만 입력폼 하단에 긴 동의 문구가 노출되면 폼이 길어지고 가독성도 떨어지기 쉬운데요, 이번 글에서는 입력폼 디자인을 해치지 않으면서도 개인정보 동의를 받을 수 있는 방법을 소개해 드리겠습니다. 2. 아임웹 입력폼 동의 항목 기본 설정