로그인 상태 요소(헤더용)

사이트 상단에 "로그인 · 회원가입" 링크를 두고 싶은데, 방문자가 이미 로그인한 상태에서도 같은 링크가 보이면 어색하지 않을까 고민하셨나요? 에디터의 로그인 상태 요소는 방문자가 로그인했는지에 따라 "로그인 · 회원가입"과 "이름님 · 마이페이지"를 바꿔 보여 주는 헤더용 요소입니다. 이 글에서는 요소를 넣는 위치와 링크 문구를 고치는 방법, 로그인 전후 모습이 어떻게 구성되는지를 안내합니다.

1. 로그인 상태 요소는 어디에 있나요

요소를 넣을 섹션(보통 맨 위 헤더 섹션)을 먼저 선택하고, 왼쪽 레일의 요소 추가를 엽니다. 인터랙티브 묶음에서 로그인 상태를 누르면 선택한 섹션의 내용 맨 아래에 들어갑니다.

넣으면 짙은 회색 글자의 로그인 링크와, 보라색 바탕에 흰 글자인 회원가입 버튼 모양 링크가 한 줄로 나란히 놓입니다. 두 링크 모두 요소 안에 미리 연결 주소가 들어 있어 따로 주소를 적을 필요가 없습니다. 아래 화면은 가게 이름만 있는 헤더 섹션에 요소를 넣은 모습입니다.

2. 로그인 전과 후에 무엇이 보이나요

요소 안에는 두 묶음이 들어 있습니다.

• 로그인 전: 로그인(회원 로그인 화면으로 연결)과 회원가입(회원가입 화면으로 연결)
• 로그인 후: 방문자 이름 뒤에 "님"이 붙은 글자와 마이페이지 링크(회원 마이페이지로 연결)

편집 화면에서는 로그인 전 묶음만 보이고, 로그인 후 묶음은 숨겨져 있습니다. 두 묶음 가운데 어느 쪽을 보여 줄지는 배포된 페이지가 방문자의 로그인 여부를 확인해 정합니다. 이때 방문자에게서 가져와 보여 주는 정보는 이름 하나뿐입니다. 방문자가 로그인하지 않았거나 확인에 실패하면 로그인 전 묶음이 그대로 보입니다.

3. 링크 문구 고치기

요소를 선택하려면 두 링크 사이의 빈 틈을 누릅니다. 편집 화면에서는 링크를 눌러도 다른 페이지로 이동하지 않고 선택만 됩니다. 선택하면 요소 근처에 작은 아이콘 막대가 나타나는데, 이 막대에는 이동, 요소 설정 열기, 레이아웃 / 간격, 요소 복제, 요소 삭제 아이콘이 있습니다. 톱니바퀴 모양의 요소 설정 열기를 누르면 설정 창이 열립니다.

설정 창에는 안내 문장과 함께 로그인 링크 문구, 회원가입 링크 문구, 마이페이지 링크 문구 입력칸 세 개가 있습니다. 칸에 글자를 입력하면 바로 화면의 링크 글자가 바뀝니다. 바꿀 수 있는 것은 문구뿐이고, 링크가 연결되는 주소는 그대로입니다. 아래는 회원가입을 "무료 가입"으로, 마이페이지를 "내 정보"로 바꾼 모습입니다.

마이페이지 문구는 로그인 후 묶음에 들어 있어 편집 화면에서는 보이지 않습니다. 입력칸에서 바꾼 값이 로그인 후 묶음에 들어갑니다.

4. 저장하고 확인하기

상단의 저장을 누른 뒤 편집 화면을 다시 열어도 바꾼 문구가 그대로 남아 있습니다.

로그인 후 묶음까지 확인하고 싶다면 상단의 전체 소스를 열어 보세요. 로그인 전 묶음 아래에 이름과 "님", 마이페이지 링크가 들어 있는 묶음이 보이고, 방금 입력한 문구가 그대로 들어가 있습니다. 확인만 하고 취소로 닫으면 됩니다.

정리하면, 헤더 섹션을 선택하고 로그인 상태를 넣은 뒤 설정 창에서 문구를 고치고 저장하는 네 단계로 끝납니다. 요소를 복제하거나 지울 때는 선택한 뒤 아이콘 막대의 요소 복제, 요소 삭제를 사용합니다.

5. 이렇게 활용해 보세요

• 모든 페이지의 헤더 섹션 오른쪽 위에 넣어 방문자가 어디서든 로그인·가입으로 이동하게 해 보세요.
• 가입 문구를 "무료 가입", "혜택 받기"처럼 사이트 성격에 맞게 바꿔 보세요.
• 회원 전용 혜택을 소개하는 페이지 상단에 두어, 로그인한 방문자에게는 마이페이지로 가는 길을 보여 주세요.

6. 알아 두실 점

• 로그인 여부 확인은 내 사이트 도메인에서 열린 배포 페이지에서만 이루어집니다. 다른 주소에서 열면 항상 로그인 전 모습으로 보입니다.
• 링크가 연결되는 곳은 회원 로그인, 회원가입, 마이페이지 화면입니다. 이 화면들은 별도의 회원 폼 요소·회원 화면 설정으로 만들며, 별도 글에서 다룹니다.
• 설정 창에서 바꿀 수 있는 것은 링크 문구뿐입니다.
• 문구를 바꾼 뒤에는 상단의 저장을 눌러야 다음에 열었을 때도 남습니다.
• 이 글의 화면은 모두 데스크탑 편집 화면 기준입니다.