블로그스팟 '작성자 프로필 박스' 디자인 가이드, 나를 브랜드로 만드는 한 줄!

 

글의 완성도를 높이는 '작성자 프로필 박스' 레이아웃

포스팅의 마지막에서 독자의 시선이 머무는 곳, 그곳에 정성스러운 프로필 박스를 배치해 보세요. 단순한 정보 전달자를 넘어 한 분야의 전문가로서의 이미지를 각인시킬 수 있습니다.

1단계: 프로필 박스 전용 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

아래 코드를 복사해서 붙여넣으세요. 깔끔한 테두리와 그림자 효과가 들어간 현대적인 디자인입니다.

/* 작성자 프로필 박스 전체 스타일 */ .author-box { display: flex; align-items: center; background-color: #ffffff; border: 1px solid #e1e4e8; border-radius: 15px; padding: 25px; margin: 40px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } /* 프로필 이미지 스타일 */ .author-avatar { width: 100px; height: 100px; border-radius: 50%; /* 동그란 이미지 */ object-fit: cover; margin-right: 25px; border: 3px solid #4285f4; /* 테마 컬러 테두리 */ } /* 텍스트 영역 */ .author-info { flex: 1; } .author-name { font-size: 18px; font-weight: bold; color: #222; margin-bottom: 8px; display: block; } .author-desc { font-size: 14px; color: #666; margin-bottom: 12px; line-height: 1.5; } /* 프로필 내 SNS 버튼 */ .author-social a { text-decoration: none; font-size: 13px; color: #4285f4; font-weight: bold; margin-right: 15px; } /* 모바일 대응 (세로 배치) */ @media (max-width: 480px) { .author-box { flex-direction: column; text-align: center; } .author-avatar { margin-right: 0; margin-bottom: 20px; } }

2단계: 내 정보 입력하기 (HTML)

[테마] → [HTML 편집]에서 본문이 끝나는 지점이나, [레이아웃]에서 본문 하단 가젯으로 아래 코드를 넣으세요.

<div class="author-box"> <!-- 1. 내 사진 주소 --> <img src="내_프로필_이미지_주소.jpg" class="author-avatar" /> <div class="author-info"> <!-- 2. 이름/닉네임 --> <span class="author-name">작성자 이름 입력</span> <!-- 3. 자기소개 --> <div class="author-desc"> 디지털 마케팅과 웹 디자인에 진심인 블로거입니다. 독자분들에게 꼭 필요한 정보만을 큐레이션하여 공유합니다. </div> <!-- 4. 소셜 링크 --> <div class="author-social"> <a href="인스타주소">Instagram</a> <a href="유튜브주소">YouTube</a> <a href="문의메일주소">Contact</a> </div> </div> </div>

💡 브랜딩 효과를 극대화하는 팁
1. 이미지 선택: 실제 본인 얼굴 사진이 가장 신뢰도가 높지만, 캐릭터나 블로그 로고를 써도 무방합니다.
2. 한 줄 요약: 나를 정의하는 핵심 키워드(예: 10년 차 기획자, 맛집 사냥꾼 등)를 포함해 보세요.
3. 연결성: Contact 링크에 이메일이나 오픈 카톡을 걸어두면 실제 비즈니스 제안으로 이어지기도 합니다.

⚠️ 주의사항
- 이미지 경로: 주소가 반드시 .jpg, .png 등으로 끝나는지 확인하세요.
- 여백 조절: 본문과 프로필 박스가 너무 붙어 있다면 CSS에서 margin-top 값을 조절하여 충분한 여백을 확보하세요.

완성된 프로필 박스로 독자와 더 깊게 소통해 보세요!