시각적 균형과 레이아웃(섹션 3)

1. 시각적 균형과 레이아웃 (Layout & Visual)

이 코드는 ‘이미지-텍스트 복합 레이아웃’의 전형을 보여줍니다.

• 좌우 대칭 구조: .intro-v3-flex 클래스에 display: flex와 align-items: center를 적용하여 이미지와 텍스트가 시각적으로 수평 균형을 이루도록 설계되었습니다. 이는 사용자에게 안정감을 주며 정보 가독성을 높입니다.
• 비대칭 곡선 디자인: 가장 눈에 띄는 디자인 포인트는 .intro-v3-image의 border-radius: 50px 5px 50px 5px; 설정입니다. 단순히 사각형 이미지를 사용하는 대신 대각선 방향으로 깊은 곡선을 주어, 딱딱한 기업 이미지를 탈피하고 부드러우면서도 세련된 느낌을 강조했습니다.

2. 가독성 중심의 콘텐츠 설계 (Typography & Hierarchy)

텍스트의 위계 구조가 명확하여 사용자가 핵심 메시지를 빠르게 파악할 수 있습니다.

• 강조된 헤드라인: h2 태그에 font-size: 36px와 <br> 태그를 활용하여 두 줄로 배치된 제목은 시선을 단번에 사로잡습니다. ‘함께’라는 키워드를 반복하여 신뢰 기반의 협력 관계를 강조합니다.
• 체크리스트 활용: 핵심 혜택(1:1 PM, 유지보수, SEO)을 ul 리스트로 처리했습니다. 특히 CSS의 ::before 가상 요소를 사용하여 초록색 체크 표시(✓)를 코드로 구현함으로써, 이미지 파일을 불러오는 리소스를 줄이면서도 깔끔한 ‘혜택 지향적’ 디자인을 완성했습니다.

3. 반응형 웹 디자인 (Responsive Design)

모바일 사용자를 고려한 미디어 쿼리(@media)가 정교하게 설정되어 있습니다.

• 유동적인 레이아웃: 화면 폭이 850px 이하로 줄어들 경우, flex-direction: column으로 변경되어 가로로 배치되었던 이미지와 글이 세로로 재배치됩니다. 이는 작은 모바일 화면에서도 콘텐츠가 잘리지 않고 흐름을 유지하게 합니다.
• 이미지 최적화: object-fit: cover 속성을 사용하여, 화면 크기에 따라 이미지 컨테이너의 비율이 변하더라도 이미지가 찌그러지지 않고 영역을 꽉 채우도록 처리되었습니다.

4. 코드의 기술적 완성도와 효율성

• 유지보수 용이성: CSS 클래스명이 intro-v3- 접두사를 사용하고 있어 다른 라이브러리나 기존 코드와의 충돌을 방지하는 네이밍 규칙(BEM 스타일)을 따르고 있습니다.
• 세밀한 사용자 경험(UX): 배경색에 사용된 #f8fafc(매우 연한 파스텔톤 블루)는 순백색보다 눈의 피로를 덜어주며, 텍스트에 사용된 다크 그레이 계열(#334155, #475569)은 검은색보다 세련된 느낌을 주면서 배경과 적절한 대비를 이룹니다.

  <style>
        .intro-section-v3 {
            padding: 80px 20px;
            background-color: #f8fafc;
        }

        .intro-v3-flex {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 50px;
        }

        .intro-v3-content {
            flex: 1;
        }

        .intro-v3-image {
            flex: 1;
            background: #e2e8f0;
            height: 350px;
            border-radius: 50px 5px 50px 5px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
        }

        .intro-v3-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .intro-v3-content h2 {
            font-size: 36px;
            color: #334155;
            margin-bottom: 25px;
        }

        .intro-v3-list {
            list-style: none;
            padding: 0;
        }

        .intro-v3-list li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
            font-size: 17px;
            color: #475569;
        }

        .intro-v3-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #10b981;
            font-weight: bold;
        }

        @media (max-width: 850px) {
            .intro-v3-flex {
                flex-direction: column;
            }

            .intro-v4-content h2 {
                font-size: 28px;
            }

            .intro-v3-list li {
                text-align: left;
            }
        }
    </style>

    <section class="intro-section-v3">
        <div class="intro-v3-flex">
            <div class="intro-v3-image">
                <img src="https://doorweb.net/wp-content/uploads/2026/01/office-business-company-office-office-office-office-office-2360063.jpg"
                    alt="Company Office Image">
            </div>
            <div class="intro-v3-content">
                <h2>함께 고민하고<br>함께 성장합니다.</h2>
                <p style="margin-bottom: 25px; line-height: 1.6;">단순한 외주 업체가 아닙니다. 고객사의 팀원이라는 마음으로 프로젝트의 A부터 Z까지 책임지고
                    가이드해 드립니다.</p>
                <ul class="intro-v3-list">
                    <li>1:1 전담 프로젝트 매니저 배치</li>
                    <li>무상 유지보수 1년 보장</li>
                    <li>검색 최적화(SEO) 기본 적용</li>
                </ul>
            </div>
        </div>
    </section>