CSS만으로 브라우저 창 UI 만드는 방법

CSS를 활용하면 별도의 이미지나 디자인 도구 없이도 실제 브라우저 창처럼 보이는 UI를 손쉽게 만들 수 있습니다. 상단의 윈도우 버튼, 주소창 입력란, 메뉴 점 아이콘까지 모두 HTML과 CSS만으로 구현할 수 있는데요. 이번 글에서는 브라우저 창 목업(mockup)을 만드는 전체 과정을 예제 코드와 함께 자세히 살펴보겠습니다.

완성될 결과물 미리보기

이번 예제에서 만들 브라우저 창은 다음과 같은 요소로 구성됩니다.

윈도우 컨트롤 버튼 – 빨강, 노랑, 초록색 원형 버튼으로 macOS 스타일의 닫기·최소화·전체화면 버튼을 표현합니다.
주소 입력창 – 브라우저 중앙에 위치한 URL 입력 필드입니다.
메뉴 아이콘 – 오른쪽에 세로로 정렬된 작은 점 3개로 브라우저 설정 메뉴를 나타냅니다.
콘텐츠 영역 – 웹페이지 본문이 들어가는 공간입니다.

전체 예제 코드

아래 코드를 그대로 복사해 HTML 파일로 저장하면 바로 실행해볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .menuBar {
        border: 3px solid #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .menuRow {
        padding: 10px;
        background: #f1f1f1;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .browserField {
        float: left;
    }
    .left {
        width: 15%;
    }
    .right {
        width: 10%;
    }
    .middle {
        width: 75%;
    }
    .menuRow:after {
        content: "";
        display: table;
        clear: both;
    }
    .menuBarDots {
        margin-top: 4px;
        height: 12px;
        width: 12px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
    }
    input[type=text] {
        width: 100%;
        border-radius: 3px;
        border: none;
        background-color: white;
        margin-top: -8px;
        height: 25px;
        color: #666;
        padding: 5px;
    }
    .menuDots {
        width: 5px;
        height: 5px;
        background-color: #aaa;
        margin: 3px 0;
        display: block;
        border-radius: 50%;
    }
    .content {
        padding: 10px;
    }
</style>
</head>
<body>
<div class="menuBar">
<div class="menuRow">
<div class="browserField left">
<span class="menuBarDots" style="background:#ED594A;"></span>
<span class="menuBarDots" style="background:#FDD800;"></span>
<span class="menuBarDots" style="background:#5AC05A;"></span>
</div>
<div class="browserField middle">
<input type="text" value="https://demo.com/">
</div>
<div class="browserField right">
<div style="float:right">
<span class="menuDots"></span>
<span class="menuDots"></span>
<span class="menuDots"></span>
</div>
</div>
</div>
<div class="content">
<h1>Sample Text</h1>
<h2>Welcome to our website</h2>
</div>
</div>
</body>
</html>

코드 핵심 포인트 살펴보기

1. 윈도우 버튼(.menuBarDots)

border-radius: 50%를 적용한 <span> 요소를 원형 버튼으로 만들고, 인라인 스타일로 빨강(#ED594A), 노랑(#FDD800), 초록(#5AC05A) 색상을 지정했습니다. 이렇게 하면 macOS 브라우저 특유의 윈도우 컨트롤 버튼이 자연스럽게 재현됩니다.

2. 주소창(input[type=text])

테두리를 제거하고 흰색 배경에 둥근 모서리(border-radius: 3px)를 적용해 실제 브라우저 주소창과 비슷한 느낌을 냈습니다. value 속성에 기본 URL을 넣어 처음부터 주소가 표시되도록 했습니다.

3. 레이아웃 정렬(float과 clearfix)

왼쪽 버튼 영역(15%), 가운데 주소창(75%), 오른쪽 메뉴 영역(10%)을 float: left로 배치하고, .menuRow:after 선택자로 clearfix를 적용해 부모 요소의 높이 무너짐 현상을 방지했습니다.

4. 메뉴 점 아이콘(.menuDots)

작은 원형 점 3개를 세로로 쌓아 브라우저의 확장 메뉴 아이콘을 표현했습니다. display: block과 margin: 3px 0 덕분에 점들이 일정한 간격으로 정렬됩니다.

실행 결과

위 코드를 브라우저에서 열면 다음과 같이 실제 브라우저 창과 유사한 화면이 출력됩니다.

CSS만으로 브라우저 창 UI 만드는 방법 – 예제 코드로 배우기

마무리하며

이처럼 CSS의 원형 버튼, float 레이아웃, clearfix 기법만 익혀두면 이미지 없이도 사실적인 브라우저 창 목업을 만들 수 있습니다. 이런 기법은 튜토리얼 콘텐츠 제작, 포트폴리오 웹사이트의 스크린샷 프레임, 데모 페이지 디자인 등 다양한 곳에서 유용하게 활용할 수 있으니 직접 변형해보면서 응용해 보시기 바랍니다.