적용버전 : XpressEngine 공통 스마트 헤더 로그인

스마트 헤더 로그인

내 마음대로 스마트 헤더 로그인

스마트 헤더 로그인"스마트"라는 단어를 제가 좀 붙여 봤습니다. 별것은 아니구요 웹사이트 최 상단에 위치한 로그인 및 정보출력에 대한 부분입니다. 보통 사이트의 가장 첫 페이지를 메인페이지라고 하는데요, 메인에는 흔히 로그인 위젯을 이용해서 간단한 로그인 폼을 제공합니다. 과거 제로보드4 시절에는 외부로그인 또는 아웃로그인이라는 표현을 사용하였습니다. 외부로그인이란, 별도의 로그인 및 회원가입을 위한 페이지 구성을 하지 않고 메인 또는 서브 페이지의 특정 영역에서 작은 폼상자를 이용해 아이디와 비밀번호를 입력하여 사이트에 로그인하는 방식을 말하지요. 작은 폼(Form)이지만 페이지마다 항상 가지고 다녀야 할 물건이 되기 때문에 웹사이트를 디자인 할 때 무척 부담스러운 것은 사실입니다. 따라서 요즘은 맨 윗줄에 간략히 로그인 상태인지 아닌지를 구분하는 정도의 정보를 표시해 주는 것이 일반화 되어 있습니다. 또한 로그인이 않되어 있을 경우 로그인 페이지로 이동하도록 링크를 제공하는 것이 일반적인 방법입니다.

웹사이트의 가장 윗부분에 있기 때문에 탑로그인(top_login)이라는 네이밍을 저는 즐겨쓰지만, 딱히 이름이 없어서 이번 기회를 통해 스마트를 붙여 스마트 헤더 로그인이라고 불러 보았습니다. 별도의 로그인 위젯을 통해 로그인하게 되면 이것은 자동으로, 스마트하게 알아차리고 회원과 비회원의 기본정보를 화면에 표시해 줍니다. 만약 로그인 위젯이 없는 페이지에서는 로그인 페이지로 이동을 시켜주기도 하지요. 매우 스마트한 친구이며 꼭 필요한 기능입니다.

스마트 헤더 로그인 영역은 로그인 위젯을 사용하기 보다는 레이아웃 문서의 헤더(header) 부분에서 직접 코딩 되어 사용되는 것이 일반적입니다. 위치 또한 웹사이트의 우측 상단이 일반적이어서 레이아웃을 디자인 할 때 이 부분을 항상 고려해야 합니다. 만약 실험적이고 파격적인 디자인 레이아웃을 사용할 경우 방문자로 하여금 로그인 할 수 있는 방법을 충분히, 쉽게 알아차릴 수 있도록 배려해야 합니다. 요즘은 스크립트의 도움을 받아 모달창 또는 토글 기능을 활요하여 로그인을 숨겨두고 필요할 때만 열어서 사용하는 방법도 많이 활용되지만, 하위 버전의 웹브라우저에서는 오류가 발생할 수 있는 부분이 있어 크로스브라우징을 통해 제대로 작동하는지 꼼꼼히 확인해 볼 필요가 있습니다.

크로스브라우징이란, 웹사이트의 전반적인 디자인과 기술 구현이 여러 웹브라우저에서 의도한 목적대로 정상적으로 표현되고 작동하는지를 확인하고 점검하는 것을 말합니다. 여러분이 비싼 비용을 들여 웹사이트 제작을 의뢰하였는데 익스플로러 7 버전을 사용하는 방문자에게는 정상적으로 보이지만, 파이어폭스 또는 익스6, 크롬이라는 웹브라우저에서는 레이아웃이 뒤엉키거나 알아볼 수 없는 사이트로 제작된다면, 크로스브라우징을 전혀 고려하지 않은 것입니다. 만약에 화면에 보이는 것은 둘째치고 로그인조차 할 수 없는 오류를 가지고 있다면 아무리 훌륭한 디자인적인 요소를 가지고 있다고 해도 낙제점을 면하기 어렵습니다. 따라서 스크립트의 화려한 면만을 보지 마시고 작은 부분 하나라도 크로스브라우징을 통해 꼼꼼히 확인한 후에 문제가 없는 경우, 적용할 수 있기를 바랍니다.


로그인 항목 리스트 작성하기

스마트 헤더 로그인이 보기에는 가로 방향으로 늘어서 있기 때문에 각각의 요소를 가로로 늘어놓은 것이 아닌가 생각될 수 있지만 실제적으로는 리스트 태그를 이용한 간단한 구성 방법이 사용됩니다. 우선 아래 UL(Unordered Lists)리스트를 확인해 봅시다.

<ul>
   <li>관리자</li>
   <li>회원정보</li>
   <li>로그아웃</li>
   <li>닉네임</li>
   <li>회원가입</li>
   <li>로그인</li>
   <li>Home</li>
</ul>

UL(Unordered Lists)리스트는 숫자 또는 알파벳을 사용하지 않고, ○ 또는 ● 또는 ■ 등과 같은 블릿기호를 이용해 리스트를 만들 때 사용하는 태그입니다. <ul>....<ul> 태그 사이에 <li>하위 목록</li>을 넣어서 리스트를 만들지요. 위와 같이 태그를 작성하면 아래와 같이 표현됩니다.

  • 관리자
  • 회원정보
  • 로그아웃
  • 닉네임
  • 회원가입
  • 로그인
  • Home

아래에서 부터 설명드리면, Home은 로그인 여부와 상관없이 항상 나와야 합니다. 하지만 로그인과 회원가입은 로그인 후에 사라져야겠지요. 그래서 빨간색으로 써 놨습니다. 나머지 부분은 로그인 후에 표시되는 부분입니다. 닉네임은 로그인 한 사람의 이름 또는 닉네임이 들어갈 자리입니다. 리스트를 거꾸로 써 놓은 것은 나중에 목록을 우측 방향으로 정렬하기 위해서 입니다. 상단 맨 우측이 관리자가 되는 것이지요.


목록을 작성하고 로그인 전과 후의 내용이 정리되면 아래와 같이 XE 탬플릿 문법을 사용해서 각각의 링크를 설정해야 합니다.

<ul id="smart_login">
<!--@if($logged_info->is_admin=="Y")--> ※ 만약 로그인한 사람이 관리자라면 이 부분을 보여주세요.
<li><a href="{getUrl('','module','admin')}" onclick="window.open(this.href);return false;">관리자</a></li>
<!--@end-->
<!--@if($is_logged)--> ※ 로그인을 했다면 이 부분을 보여주고
<li><a href="{getUrl('mid','example_main','act','dispMemberInfo')}">회원정보</a></li>
<li><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
<li><a href="#">닉네임</a></li>
<!--@else--> ※ 로그인 전이라면 여기서 부터
<li><a href="{getUrl('mid','example_main','act','dispMemberSignUpForm')}">회원가입</a></li>
<li><a href="{getUrl('mid','example_main','act','dispMemberLoginForm')}">로그인</a></li>
<!--@end--> ※ 여기까지 보여주면 되겠지! 아래 Home은 항상 놔두세요.
<li><a href="{getUrl()}" class="nobg">Home</a></li>
</ul>

각각의 목록들은 링크 태그 안에서 {getUrl()} XE 문법을 사용하여 동작하게 되는데 () 사이에 동작을 목표로 하는 모듈(mid)과 액션(act)의 방법을 설정하게 됩니다. 'module','admin'은 클릭했을때(onclick=) 새로운 창으로 XE의 관리자 페이지를 보여달라는 뜻이고, 'act','dispMemberInfo'는 어떤 내용을 실행(action)할 것인지 알려주는 것입니다. 즉 회원정보를 보여달라!는 의미의 dispMemberInfo, 회원가입을 받아라! dispMemberSignUpForm, 로그인을 받아라!dispMemberLoginForm 이라고 설정하는 것입니다.

그런데 회원정보를 보여주는 것은 현재 페이지가 아닌 별도의 페이지 또는 다른 페이지에서 보여주고 싶습니다. 따라서 그 페이지에 가서 실행하라는 의미로 'mid','example_main(모듈의 이름)'이라고 쓰고 현재 페이지가 아닌 다른 페이지, 즉 다른 모듈의 이름 'example_main' 을 자세히 적어주는 것입니다. 쓰는 순서는 큰 것부터 작은 것 순으로 씁니다. 모듈은 가장 큰 프로그램의 단위입니다. 때문에 module을 이용할 경우 가장 먼저 쓰게 됩니다. 관리자가 아니면 일반 페이지에서 모듈 프로그램을 호출 할 일이 거의 없습니다. 따라서 회원정보나 회원가입, 로그인 등은 모듈아이디를 호출 할 때 'mid',로 구분하고 '모듈의 이름'을 불러주는 것이죠. 페이지를 정했으면 실행방법(action)을 설명합니다. 'act',라고 쓰고 '함수이름'을 호출합니다. 실행 함수의 이름은 XE의 classes(클래스) 디렉터리에서 정의하고 있습니다. 이 함수들을 한번씩 읽어보시는 것도 좋은 공부가 될 것 같습니다. 우선은 필요한 함수를 사용하여 스마트 헤더 로그인을 작성하도록 합니다.


다음에 해야 할 일은 각 항목의 텍스트를 XE가 사용하는 언어팩으로 바꿔주면 좋겠지요? XE에는 이미 기본적인 단어들이 언어팩에서 변수로 설정해 두고 있습니다. 이것을 그대로 사용한다면 다국어지원을 위한 언어설정도 가능합니다. 해당 항목을 다음과 같이 언어팩으로 바꿔줍니다. 닉네임은 이곳에서 이름만 표시하도록 링크속성을 설정하지 않았습니다.

  • 관리자 : {$lang->cmd_management}
  • 회원 정보 보기 : {$lang->cmd_view_member_info}
  • 로그아웃 : {$lang->cmd_logout}
  • 로그인 사용자 닉네임 : {$logged_info->nick_name} or 이름 : {$logged_info->user_name}
  • 회원가입 : {$lang->cmd_signup}
  • 로그인 : {$lang->cmd_login}
  • Home : 그대로 사용

XE 템플릿 신문법 적용

위에서 사용된 조건 구문은 구문법을 이용한 방법입니다. XE 템플릿 신문법을 사용하면 <li>...</li>에서 조건문만 추가하면 좀더 간편하게 작성하실 수 있습니다. 텍스트는 XE 언어팩으로 바꾸세요.

<ul>
   <li cond="$grant->manager">관리자</li>
   <li cond="$is_logged">회원정보</li>
   <li cond="$is_logged">로그아웃</li>
   <li cond="$is_logged">닉네임</li>
   <li cond="!$is_logged">회원가입</li>
   <li cond="!$is_logged">로그인</li>
   <li>Home</li>
</ul>

CSS로 정렬하기

/* 상단 스마트로그인 */
#smart_login {position:absolute; top:15px; right:10px; list-style:none; }
※ #smart_login으로 layout.html 문서의 ul 아이디를 바로 지시합니다. position 속성을 이용해 위치를 고정하고 
리스트의 블릿기호 스타일을 제거합니다. 마진과 패딩값은 이미 *{margin:0; padding:0}으로 제거 되었습니다. 
#smart_login li {float:right;}
※ 리스트를 float 속성을 이용해 오른쪽 방향으로 띄워줍니다. 그러면 각 목록이 가로방향으로 붙어 나열됩니다.
#smart_login li a {color:#FFF; text-decoration: none; padding:0 5px; 
		background:url(../images/dot_bar.gif) no-repeat left 2px;}
※ 리스트는 모두 링크(a) 속성을 가지고 있습니다. 따라서 링크속성에서 밑줄 등을 제거하고 목록의 가로 여백을 준 뒤 
왼쪽방향으로 목록을 구분하기 위한 작은 도트막대를 백그라운드 이미지로 처리합니다. 백그라운드는 반복하지 않고 
한번만 표시하고 위치를 조정합니다.(닉네임도 임시 링크속성을 주어서 함께 처리합니다.)
.nobg {background:none !important;}
※ 배경처리를 원하지 않는 목록에는 class="nobg"로 처리하여 배경을 삭제합니다. 상속을 제거하기 위해 !important를 추가합니다.