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>
