8강 아웃로그인 스킨 (skin/outlogin)

아웃로그인 스킨?

SIR 회원분들 중에서는 아웃로그인 스킨이 뭐야? 하시는 분들이 드물 것입니다.
사실 아웃로그인 스킨이야말로 그누보드에 포함된 스킨 중 최신글만큼이나 친숙하고 익숙한 스킨이기 때문입니다.
스킨 게시판의 양대 산맥이죠. 무한도전에서 길이 게시판 지분율 상한가를 쳤을 때도 아웃로그인 스킨 지분율은 못 따라갔다는 전설이 있습니다.

하지만 그럼에도 불구하고 아웃로그인 스킨에 대해 짚고 넘어가는 이유는, 절대로 분량 확보를 위함이 아니라는 것을 미리 밝혀두는 바입니다.

예전에는 아웃로그인 스킨의 활용도가 높고, 디자인적으로도 중요한 위치를 차지해왔습니다.
거의 대부분의 사이트가 콘텐츠보다는 정형화된 형태의 레이아웃과 디자인에 의지했기 때문에 아웃로그인 스킨의 디자인적 기능 또한 강조가 된 것입니다.

오리위즈님의 아웃로그인 스킨은 화려하면서도 깔끔한 맛이 있지만, 사실 대부분의 사이트들이 아웃로그인에 무리해서 힘을 주다 보니 사이트가 전반적으로 엉망이 되는 경우도 간혹 있었습니다.
사실 전반적으로 엉망이다 보니 아웃로그인도 그렇게 보이는 건지, 정확히는 알 길이 없습니다. 그냥 아웃로그인 얘기하다 보니까 아웃로그인이 주체가 된 것 뿐입니다. ^^;;

아무튼 이랬던 아웃로그인이 어느 순간부터 담백깔끔해지기 시작합니다.
디자인만큼 서비스와 콘텐츠에도 눈을 떠나간 시기, 웹 표준이 뿌리를 깊이 내리기 시작한 시기 쯤이 아닌가 생각됩니다.
외국 사이트의 경우에는 아웃로그인은 아예 사용하지 않는 경우도 대부분인 것 같고, 국내에서도 점점 아웃로그인의 비중을 줄여나가는 추세인 것으로 여겨집니다.
이런 경향은 블로그 서비스나 워드프레스 등의 CMS 툴의 영향을 받은 것도 있는 것 같습니다.
하지만 별도 로그인 페이지를 이용하는 것보다 빠르고 간편하다는 이유 때문에 아직도 많은 사랑을 받고 있는 것이 사실이며, 특히 포털급 사이트들은 아웃로그인의 디자인이나 기능을 점점 더 유려하고 강력하게 발전시키고 있는 실정입니다.

아웃로그인을 꼭 써야 하나? 쓰지 말아야 하나? 는 사실 정해진 답이 없습니다.
간단한 기준을 세워보자면 웹 사이트가 제공하는 서비스나 콘텐츠의 목적과 방법에 따라 사용 여부를 정할 수 있을 것입니다.
예를 들어, 회원 기능이 중요하고 강조되는 사이트라면 아웃로그인을 제공하는 것이 바람직할 것입니다.
하지만 비주얼적인 요소나, 정보 제공/공유, 혹은 소셜 미디어와의 연계가 큰 서비스라면 아웃로그인을 굳이 제공할 필요는 없을 것입니다.

고전적 아웃로그인 스킨의 문제점

고전적 아웃로그인 스킨이라는 말이 참 난해하고 애매하고 모호하고 참 좀 그렇네요.
이해를 쉽게 하자면 table 로 짜여진 아웃로그인 스킨의 문제점이라고 할 수 있겠습니다.
문제점이 여러가지 있겠지만 가장 중요하고 큰 문제점은 논리적인 포커스 이동 확보가 쉽지 않았다는 것입니다.
예를 들어 다음과 같은 아웃로그인 스킨이 있다고 가정해보겠습니다.

대략 다음과 같이 마크업할 수 있을 것입니다. (CSS는 제외합니다.)

        <table>
        <tr>
            <td>
                <label for="id">회원아이디</label>
                <input type="text" name="id" id="id">
            </td>
            <td rowspan="2">
                <input type="submit" value="로그인">
            </td>
        </tr>
        <tr>
            <td>
                <label for="pw">패스워드</label>
                <input type="text" name="pw" id="pw">
            </td>
        </tr>
        </table>

        <table>
        <tr>
            <td>
                <input type="checkbox" name="auto" id="auto">
                <label for="auto">자동로그인</label>
            </td>
            <td>
                <a href="#none">정보찾기</a>
                <a href="#none">회원가입</a>
            </td>
        </tr>
        </table>
    

이 마크업을 바탕으로, 포커스를 이동하게 되면, 포커스 순서는 다음과 같습니다.

이상한 점을 찾으셨습니까? 당연히 바로 찾으셨겠지요들... 하하하... 하하하하... 하하하
사용자가 포커스를 이동시키면서 기대하는 순서는 아이디 입력 후 패스워드 입력 그리고 엔터 일 것입니다.
그런데 이 마크업은 아이디 입력 후 로그인 버튼 이동 후 패스워드를 입력하게 되어 있습니다.
키보드로 웹을 이용하는데 능숙한 사람이 아니라면 꽤나 당황스러운 상황이 발생하게 된다는 것입니다.
믿기 어려우실지도 모르겠지만 실제 예전에는 이런 구조가 상당히 많았다는 것입니다.
요즘엔 오히려 찾아보기 어렵지만요. :)

한번쯤 고민해봅시다.

여기까지 강좌를 집중해서 보신 분들이라면 아마 이런 의문을 가져볼 수도 있으실 것입니다.
아웃로그인 포커스가 아이디 - 패스워드 - 로그인 버튼 순이라면 자동로그인 체크는 어떻게 해야 되는 거지? 라고 말입니다.
사실 포커스 이동 순으로만 놓고 봤을 때 가장 좋은 방법은 자동로그인 - 아이디 - 패스워드 - 로그인 버튼 순 혹은 아이디 - 패스워드 - 자동로그인 - 로그인 버튼 순이 될 것입니다.
그런데 저는 이 평범한 방법에 이러한 의문을 던지고 싶습니다. 자동로그인이 정말로 유용하고 안전한 기능일까? 라는 의문입니다.
사실 너무나 당연하게도 이러한 의문은 제가 처음 한 것이 아닙니다.

경고 메세지에서도 나오고 있지만 공공장소에서는 사실 개인정보가 유출될 수 있으므로 사용을 자제하는 것이 좋고, 저는 여기서 더 나아가 아예 자동로그인 자체를 빼버리는 것이 더 좋다고 생각하는 입장입니다. 하지만 이 의견은 어디까지나 저 개인의 의견이며, 자동로그인의 편리함 때문에 호불호가 쉽게 갈리는 문제이기도 합니다.

이런 상황이므로 자동로그인 자체를 빼버리는 것은 어거지가 될 우려가 있습니다. 그래서 차선책으로 생각할 수 있는 것이 로그인 과정에서 한발 밀려나도록 만드는 방법이고, 이렇게 하면 아이디 - 패스워드 - 로그인 버튼 - 자동로그인 순으로 포커스가 이동하게 되는 것입니다. 여러분들은 어떻게 생각하시나요?

레이아웃

퍼블리싱 강좌는 사실 g4s 프로젝트가 시작할 즈음에 함께 시작했었습니다. 지금까지 강좌가 진행되는 동안 g4s 도 베타 버전 테스트에 돌입했고, 대부분의 스킨들이 그 외양을 갖추었습니다.
그래서 앞선 강좌들과는 다르게 이번 강좌부터는 실제 g4s 에 적용된 레이아웃을 중심으로 강좌를 진행하겠습니다.
강좌가 거의 완료되어가는 시점에 말입니다. 하하하

기본적으로 아웃로그인 스킨은 두가지 상황을 산정하고 제작을 해야 합니다.
로그인 했을 때와 하지 않았을 때가 그 두가지 상황인데요. 사실 까놓고 말하면 그누보드 전체적으로 로그인 했을 때랑 안 했을 때를 구분하지 않는 경우는 드물다고 볼 수 있습니다.

마크업

로그인 전

        <section id="ol_before" class="ol">
            <h2>회원로그인</h2>
            <!-- 로그인 전 외부로그인 시작 -->
            <form name="foutlogin" action="<?php echo $outlogin_action_url ?>" onsubmit="return fhead_submit(this);" method="post" autocomplete="off">
            <fieldset>
                <input type="hidden" name="url" value="<?php echo $outlogin_url ?>">
                <label for="ol_id" id="ol_idlabel">회원아이디<strong class="sound_only">필수</strong></label>
                <input type="text" id="ol_id" name="mb_id" required class="required" maxlength="20">
                <label for="ol_pw" id="ol_pwlabel">패스워드<strong class="sound_only">필수</strong></label>
                <input type="password" name="mb_password" id="ol_pw" required class="required" maxlength="20">
                <input type="submit" id="ol_submit" value="로그인">
                <div id="ol_svc">
                    <a href="<?php echo G4_BBS_URL ?>/register.php"><b>회원가입</b></a>
                    <a href="<?php echo G4_BBS_URL ?>/password_lost.php" id="ol_password_lost">정보찾기</a>
                </div>
                <div id="ol_auto">
                    <input type="checkbox" name="auto_login" value="1" id="auto_login">
                    <label for="auto_login" id="auto_login_label">자동로그인</label>
                </div>
            </fieldset>
            </form>
        </section>
    

로그인 후

        <!-- 로그인 후 외부로그인 시작 -->
        <section id="ol_after" class="ol">
            <header id="ol_after_hd">
                <h2>나의 회원정보</h2>
                <strong><?php echo $nick ?>님</strong>
                <?php if ($is_admin == 'super' || $is_auth) {  ?><a href="<?php echo G4_ADMIN_URL ?>" class="btn_admin">관리자 모드</a><?php }  ?>
            </header>
            <ul id="ol_after_private">
                <li>
                    <a href="<?php echo G4_BBS_URL ?>/memo.php" target="_blank" id="ol_after_memo" class="win_memo">
                        <span class="sound_only">안 읽은 </span>쪽지
                        <strong><?php echo $memo_not_read ?></strong>
                    </a>
                </li>
                <li>
                    <a href="<?php echo G4_BBS_URL ?>/point.php" target="_blank" id="ol_after_pt" class="win_point">
                        포인트
                        <strong><?php echo $point ?></strong>
                    </a>
                </li>
                <li>
                    <a href="<?php echo G4_BBS_URL ?>/scrap.php" target="_blank" id="ol_after_scrap" class="win_scrap">스크랩</a>
                </li>
            </ul>
            <footer id="ol_after_ft">
                <a href="<?php echo G4_BBS_URL ?>/member_confirm.php?url=register_form.php" id="ol_after_info">정보수정</a>
                <a href="<?php echo G4_BBS_URL ?>/logout.php" id="ol_after_logout">로그아웃</a>
            </footer>
        </section>
    

이럴수가! 난 텍스트 전용 브라우저 사용자에요.

제가 이럴 줄 알았습니다.
텍스트 전용 브라우저 사용자 대응방법
미리 다 준비해뒀으니 걱정하지 마세요. 하하하