[HTML/웹 사이트] 웹 와이어프레임(Wireframe)

1. 웹 와이어프레임(Wireframe)이란?

  웹 와이어프레임은 웹사이트의 기본 레이아웃과 구조를 시각적으로 표현하는 것입니다. 일반적으로 흑백 또는 회색 톤으로 표현되며, 주로 한글이나 워드에서 간단한 선, 상자, 텍스트 등으로 구성됩니다. 

 

  웹 사이트를 만들 때 효과적인 UI 설계를 위해서는 목표는 무엇인지, 사용자는 누구인지, 사이트 맵, 정보 구조 등등을 고려하여 순차적으로 진행하는 것이 일반적입니다. 하지만 해당 글은 HTML 실습을 위하여 웹 사이트 만들기를 진행하는 것임으로 일련의 과정들을 생략하고 메인 페이지의 레이아웃과 요소 배치부터 실행하려 합니다.

 

  초보자들은 충분한 배경지식이 없는 상태에서 바로 레이아웃을 배치하는 것이 쉽지 않습니다. 그러므로 추천드리기는 비교적 레이아웃 배치가 간단한 사이트를 탐색하셔서 해당 사이트의 배치를 참고하여서 레이아웃을 짜는 걸 추천드립니다. (필자는 알바천국 사이트를 참고하여서 레이아웃을 배치했습니다.)

 

2. 구조 설계

1) 와이어프레임 구조화

알바천국 메인 페이지 일부분

 

    알바천국 메인 페이지 상단 부분을 참고한 후, 디자인할 부분을 빨간 박스로 표시했습니다. 저는 이를 <header> 와 <main>으로 구분하여서 레이아웃을 배치하려고 하며, 표시하지 않은 나머지 부분도 레이아웃을 구조화하여서 한글에서 작업을 진행했습니다.

 

대략적인 레이아웃

  

  한글에서 표를 활용하여서 대략적인 레이아웃을 구성했습니다. 웹 사이트를 점점 구축하면서 구성 요소가 변경될 수 있다는 것을 참고하여서 작업하시면 좋을 것 같습니다. 

 

2) 와이어프레임 코드작성

  이제 구성한 레이아웃을 바탕으로 HTML 코드를 입력합니다. 

    <div class="container">
        <div id="container">
            <!--header-->
            <header class="header">
                <!--logo-->
                <h1 class="logo"><a href="main.html"><img src="image/logo.jpg" width="151"></a></h1>
                <!--//logo-->

                <!--search-->

                <!--//search-->
                <ul class="headerLink">
                    <li class="login member"><a href="#">로그인</a></li>
                    <li class="join member"><a href="#">회원가입</a></li>
                </ul>
            </header>
            <!--//header-->

            <!--headerMenu-->
            <nav class="headerMenu">headerMenu</nav>
            <!--//headerMenu-->
        </div>

        <!--Main-->
        <div id="container">
            <div class="main1">
                <div id="mainBanner">mainBanner</div>
                <div id="mainNoticde">mainNoticde</div>
            </div>
            <div class="main2">main2</div>
            <div class="main3">main3</div>
            <div class="mainBrand">mainBrand</div>
        </div>
        <!--//Main-->

 

  위 코드는 HTML 코드이며 아래 코드는 CSS 코드로써 레이아웃 크기와 위치를 각 색상을 통해서 나타낸 것입니다.

/*기본설정*/
* {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    list-style: none;
}

li {
    list-style-type: none;
}

.container {
    width: 1260px;
    height: 100%;
    margin: 0 auto;
}

#container {
    width: 100%;
    margin: 0 0 12px;
}

/*header*/
.header {
    z-index: 105;
    position: relative;
    width: 1260px;
    height: 110px;
    margin: 0 auto;
    padding: 24px 0 0;
    box-sizing: border-box;
    background-color: #9f7dff;
}

.headerLink {
    position: absolute;
    top: 8px;
    right: -8px
}

.headerLink>li {
    position: relative;
    float: left
}

.headerLink>li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 1px;
    height: 12px;
    background-color: #d3dae6
}

.headerLink>li:first-child::before {
    content: none
}

.headerLink>li>a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: #4d5260
}

.headerMenu {
    z-index: 101;
    position: relative;
    width: 1260px;
    height: 56px;
    margin: 0 auto;
    border-top: 1px solid #000000;
    border-bottom: 2px solid #ffe000;
    background-color: rgb(26, 109, 81);
}

/*main*/
.main1 {
    float: left;
    width: 942px;
    height: 126px;
    margin-bottom: 12px;
    background-color: #70a4ff
}

#mainBanner {
    float: left;
    width: 624px;
    height: 126px;
    background-color: #176cff
}

#mainNoticde {
    float: right;
    width: 306px;
    height: 126px;
    background-color: #176cff
}

.main2 {
    float: right;
    width: 306px;
    height: 341px;
    margin-bottom: 12px;
    background-color: #5476aa
}

.main3 {
    float: left;
    width: 942px;
    height: 203px;
    margin-bottom: 12px;
    background-color: #bcd5ff
}

.mainBrand {
    overflow: hidden;
    width: 1260px;
    height: 87px;
    margin-bottom: 12px;
    background-color: #9c8bff
}

 

3. 와이어프레임 시각화

  아래는 해당 코드 입력시 나타나는 페이지 입니다.

레이아웃 구조