아임웹으로 홈페이지를 운영하다 보면 이런 생각이 들 때가 있습니다.
1. 로그인한 사용자에게만 특정 메뉴를 보여주고 싶다
2. 비로그인 상태에서는 로그인 버튼을 강조하고 싶다
3. 로그인하면 마이페이지 버튼이나 회원 전용 콘텐츠를 보여주고 싶다
이럴 때 사용할 수 있는 간단한 방법이 있습니다.
바로 MEMBER_UID 값을 활용하는 방법입니다.
1. 아임웹에서 로그인 상태 확인하는 방법
아임웹으로 만든 사이트에서는 로그인 여부를 MEMBER_UID라는 값으로 확인할 수 있습니다.
확인 방법은 간단합니다.
1. 홈페이지에서 개발자 도구(F12) 를 엽니다.
2. Console(콘솔) 탭을 클릭합니다.
3. 콘솔에 다음을 입력합니다.
MEMBER_UID
결과는 두 가지 중 하나로 나타납니다.
상태 | 콘솔 결과 |
|---|
로그인 상태 | 이메일 또는 아이디 |
비로그인 상태 | '' (공백) |
즉, 값이 있으면 로그인 / 값이 없으면 비로그인이라고 판단할 수 있습니다.
2. 로그인 상태에 따라 버튼을 바꾸는 예제
이 원리를 활용하면 로그인 상태에 따라 화면을 다르게 보여줄 수 있습니다.
예를 들어
1. 비로그인 상태 → 로그인 버튼 표시
2. 로그인 상태 → 마이페이지 버튼 표시
다음과 같은 코드를 사용할 수 있습니다.
<div id="login-area"></div>
<script>(function(){function isLogin(){
if(typeof MEMBER_UID === 'undefined') return false;if(!MEMBER_UID) return false;
if(String(MEMBER_UID).trim() === '') return false;return true;}
const box = document.getElementById('login-area');
if(isLogin()){box = `<a href="/shop_mypage" class="btn-mypage">마이페이지</a>`;
}else{box = `<a href="/login" class="btn-login">로그인</a>`;}})();</script>
이 코드는 페이지가 로드될 때 MEMBER_UID를 확인한 후
로그인 상태에 맞게 버튼을 자동으로 바꿔줍니다.
3. 디자인을 함께 적용하는 방법
버튼 스타일도 함께 적용하면 더 자연스럽게 사용할 수 있습니다.
이렇게 하면 로그인 상태에 따라 UI 자체가 달라지는 경험을 만들 수 있습니다.
4. 실제 활용 예시
이 방법은 생각보다 다양한 곳에 활용할 수 있습니다.
예를 들어 다음과 같은 기능을 만들 수 있습니다.
1. 로그인 사용자에게만 회원 전용 콘텐츠 표시
2. 비로그인 상태에서는 댓글 블러 처리
3. 로그인 사용자에게 특별 할인 배너 노출
4. 비로그인 상태에서는 회원가입 CTA 강조
5. 로그인 상태에서만 커뮤니티 글쓰기 버튼 표시
즉, 단순히 로그인 버튼을 바꾸는 수준이 아니라
회원 경험 자체를 다르게 설계할 수 있습니다.
5. GPT를 활용하면 더 쉽게 만들 수 있습니다
이 기능은 GPT를 활용하면 훨씬 빠르게 만들 수 있습니다.
예를 들어 다음과 같이 요청하면 됩니다.
프롬프트 예시
아임웹으로 만든 홈페이지는 콘솔에 MEMBER_UID라고 입력하면
로그인 상태에서는 메일 또는 아이디가 나오고,
비로그인 상태에서는 공백이 나와.
이걸 활용해서
비로그인 상태라면 로그인 버튼,
로그인 상태라면 마이페이지 버튼이 나오게 하는 코드를 알려줘
이렇게 요청하면 상황에 맞는 코드와 로직을 빠르게 만들 수 있습니다.
마무리
아임웹은 기본적으로 제작이 쉬운 플랫폼이지만
코드를 조금만 활용하면 훨씬 다양한 기능을 구현할 수 있습니다.
MEMBER_UID 하나만 활용해도
1. 로그인 상태 UI 분기
2. 회원 전용 콘텐츠
3. 마케팅 메시지 개인화
같은 기능을 간단하게 구현할 수 있습니다.
상단 로그인 위젯이 아니더라도
일반 페이지에서도 로그인 상태를 활용한 인터랙션을 만들 수 있다는 점,
아임웹 사용자라면 꼭 한번 활용해 보시길 추천드립니다.
아임웹으로 홈페이지를 운영하다 보면 이런 생각이 들 때가 있습니다.
1. 로그인한 사용자에게만 특정 메뉴를 보여주고 싶다
2. 비로그인 상태에서는 로그인 버튼을 강조하고 싶다
3. 로그인하면 마이페이지 버튼이나 회원 전용 콘텐츠를 보여주고 싶다
이럴 때 사용할 수 있는 간단한 방법이 있습니다.
바로 MEMBER_UID 값을 활용하는 방법입니다.
1. 아임웹에서 로그인 상태 확인하는 방법
아임웹으로 만든 사이트에서는 로그인 여부를 MEMBER_UID라는 값으로 확인할 수 있습니다.
확인 방법은 간단합니다.
1. 홈페이지에서 개발자 도구(F12) 를 엽니다.
2. Console(콘솔) 탭을 클릭합니다.
3. 콘솔에 다음을 입력합니다.
결과는 두 가지 중 하나로 나타납니다.
즉, 값이 있으면 로그인 / 값이 없으면 비로그인이라고 판단할 수 있습니다.
2. 로그인 상태에 따라 버튼을 바꾸는 예제
이 원리를 활용하면 로그인 상태에 따라 화면을 다르게 보여줄 수 있습니다.
예를 들어
1. 비로그인 상태 → 로그인 버튼 표시
2. 로그인 상태 → 마이페이지 버튼 표시
다음과 같은 코드를 사용할 수 있습니다.
<script>(function(){function isLogin(){
if(typeof MEMBER_UID === 'undefined') return false;if(!MEMBER_UID) return false;
if(String(MEMBER_UID).trim() === '') return false;return true;}
const box = document.getElementById('login-area');
if(isLogin()){box = `<a href="/shop_mypage" class="btn-mypage">마이페이지</a>`;
}else{box = `<a href="/login" class="btn-login">로그인</a>`;}})();</script>
이 코드는 페이지가 로드될 때 MEMBER_UID를 확인한 후
로그인 상태에 맞게 버튼을 자동으로 바꿔줍니다.
3. 디자인을 함께 적용하는 방법
버튼 스타일도 함께 적용하면 더 자연스럽게 사용할 수 있습니다.
이렇게 하면 로그인 상태에 따라 UI 자체가 달라지는 경험을 만들 수 있습니다.
4. 실제 활용 예시
이 방법은 생각보다 다양한 곳에 활용할 수 있습니다.
예를 들어 다음과 같은 기능을 만들 수 있습니다.
1. 로그인 사용자에게만 회원 전용 콘텐츠 표시
2. 비로그인 상태에서는 댓글 블러 처리
3. 로그인 사용자에게 특별 할인 배너 노출
4. 비로그인 상태에서는 회원가입 CTA 강조
5. 로그인 상태에서만 커뮤니티 글쓰기 버튼 표시
즉, 단순히 로그인 버튼을 바꾸는 수준이 아니라
회원 경험 자체를 다르게 설계할 수 있습니다.
5. GPT를 활용하면 더 쉽게 만들 수 있습니다
이 기능은 GPT를 활용하면 훨씬 빠르게 만들 수 있습니다.
예를 들어 다음과 같이 요청하면 됩니다.
프롬프트 예시
이렇게 요청하면 상황에 맞는 코드와 로직을 빠르게 만들 수 있습니다.
마무리
아임웹은 기본적으로 제작이 쉬운 플랫폼이지만
코드를 조금만 활용하면 훨씬 다양한 기능을 구현할 수 있습니다.
MEMBER_UID 하나만 활용해도
1. 로그인 상태 UI 분기
2. 회원 전용 콘텐츠
3. 마케팅 메시지 개인화
같은 기능을 간단하게 구현할 수 있습니다.
상단 로그인 위젯이 아니더라도
일반 페이지에서도 로그인 상태를 활용한 인터랙션을 만들 수 있다는 점,
아임웹 사용자라면 꼭 한번 활용해 보시길 추천드립니다.