(구글블로그)
(1) HTML 명령어를 이용하여 운영 중인 블로그에 업체의 상세 정보, 제품 입고 소식, 시공 후기 등 총 6개의 홍보 게시물을 등록하였습니다. (1-2) 본문의 가독성과 레이아웃의 안정성을 높이기 위해 전체 폭을 제한하는 컨테이너 구조를 설계하였으며, 모바일 등 다양한 기기 환경에서도 화면이 깨지지 않도록 반응형 웹 페이지를 구현하였습니다.
(1-3) 직접 작업한 사진을 포토샵으로 불러와 가스테이블, 중고 주방기기, 반찬냉장고, 식기세척기 등 주요 제품과 실제 시공 현장 및 매장 전경 사진의 톤과 선명도를 보정하였고, 필요한 경우 이미지를 자연스럽게 합성하여 홍보 효과를 극대화한 이미지를 등록하였습니다. (1-4) 업체의 브랜드 컬러인 레드 계열을 메인 포인트로 지정하고 황금색 등과의 보색 대비를 활용한 문의 배너를 하단에 배치하였습니다.
(2) (2-1) <table>, <tr>, <th>, <td> 명령어를 이용하여 테이블 제작. <table class="info-table"> 명령어를 통한 테이블 테두리 스타일 지정 border-collapse: collapse 속성을 통해 겹치는 테두리 선을 깔끔하게 병합 bgcolor="#f2f2f2" 명령어를 이용하여 테이블의 특정 행 배경색 조정하였습니다.
(2-2) 위 (2-1)과 같이 테이블 및 이미지 명령어를 이용하여 제품 정보 제작. <img src> 명령어를 활용하여 포토샵으로 보정한 제품 및 시공 완료 사진 등록 style="max-width: 100%; height: auto;" 속성을 사용하여 화면 크기에 맞춰 이미지 비율이 자동으로 조절되도록 지정 <a href> </a> 명령어를 활용하여 이미지를 클릭하면 원본 포스팅 사이트로 이동할 수 있도록 지정하였습니다.
(2-3) <h1>, <h2>, <h3> 명령어를 활용하여 글의 크기를 조절하고 대제목과 소제목의 위계 지정 <div> 명령어를 통해 구획을 짓고 <div class> 명령어를 통해 직접 이름을 붙이고 레이아웃 제어 <style> 명령어를 통해 전체적인 블로그 레이아웃, 폰트, 색상을 제어하고 박스의 모서리를 <border-radius> 명령어로 둥글게 하여 보기에 좋게 꾸몄으며, <span class="highlight">, <strong>, <b> 명령어를 통해 핵심 키워드와 연락처 텍스트를 굵게 하거나 색상을 변경하여 시각적 강조 효과 유도 <hr> 명령어를 통해 단락 간의 구분을 지어줬습니다. box-shadow 명령어를 통해 <div>를 이용해 만든 박스에 그림자 효과를 주어 입체감 있는 카드형 디자인 구현 line-height: 1.6 속성을 통해 줄 간격을 조절하여 텍스트 밀집도 완화하였습니다.
(티스토리)
구글블로그와 동일한 코드를 사용하였습니다.
(벨로그)
(플렛폼의 보안필터링 시스템으로 인한 오류현상 때문에 기초HTML 코드만 사용하였습니다.)
(1) HTML 명령어와 인라인 스타일(Inline Style)을 활용하여 벨로그에 업체의 상세 정보, 중고 주방기기, 반찬냉장고 및 식기세척기 등 총 4개의 홍보 게시물을 등록하였습니다. (1-2) 판매할 제품과 업체 전경 사진을 포토샵으로 불러와 해상도와 크기를 조절하고, 반찬냉장고와 식기세척기 사진을 자연스럽게 합성하는 등 웹 환경에 맞게 밝기와 선명도를 보정하였습니다. 이후 HTML 명령어를 통해 게시물 본문에 삽입하고 하이퍼링크를 연결하여 클릭 시 원본 이미지를 확인할 수 있도록 연출하였습니다. (1-3) 주요 텍스트 요소에는 제목 태그와 굵기 지정 명령어를 추가하여 방문자가 핵심 정보를 쉽게 파악할 수 있도록 하였고, 하단에는 둥근 모서리의 배경 박스를 삽입하여 문의처 정보가 시각적으로 돋보이게 배치하였습니다.
(2-1) <p>, <div> 명령어를 이용하여 문단을 나누고 구역을 지어 전체적인 텍스트 레이아웃을 조정. data-ke-size 속성과 line-height 속성을 통해 본문 텍스트의 크기를 일정하게 지정하고 줄 간격을 조절하여 텍스트의 가독성을 높임. (2-2) <a href>, <img src> 명령어를 활용하여 포토샵으로 조정한 이미지를 등록.
(2-3) <h1>, <h2>, <b>, <strong> 명령어를 통해 상호명, 주소, 연락처, 제품명 등 주요 정보의 텍스트 크기와 굵기를 조절하여 시각적 강조 효과 유도 하였고, border-bottom 속성을 활용하여 제품 소제목 하단에 회색 테두리 선을 삽입해 구분감을 부여. (2-4) <ul>, <li> 명령어를 사용하여 제품의 용도, 특징, 상태 등을 목록화하였습니다. list-style-type: none 속성을 적용해 기본 점 모양의 글머리 기호를 없애고 깔끔한 설명란 제작하였습니다. (2-5) <br> 명령어를 이용하여 자연스러운 텍스트 흐름을 위해 문장 중간에 줄바꿈을 적용하였습니다. (2-6) 하단 문의처 구역은 <div>에 background-color, border-radius 속성을 적용하여 모서리가 둥근 회색 배경 박스로 디자인, text-align: center 속성과 font-size 조절을 통해 연락처가 한눈에 들어오도록 보기에 좋게 꾸몄습니다.
(텀블러)
(1) 텍스트 입력 시 플랫폼의 자체 보안 및 인코딩 처리 방식(HTML 새니타이제이션)으로 인해 한글 문자열과 특수 기호가 HTML 엔티티(특수문자 코드, 예: &#...;) 형태로 강제 변환되는 현상이 발생하였으나, 실제 웹 렌더링 시에는 정상적으로 출력되므로 해당 코드를 수정 없이 유지하였습니다. (1-2) 텀블러 에디터 환경에서 지원하는 HTML 태그 범위 내에서 제목 지정, 굵기 강조, 목록화 명령어를 부여하여 업체명, 연락처, 제품 장점 등 방문자가 확인해야 할 핵심 정보의 위계를 명확하게 정돈하였습니다.
(2)(2-1) <div class="npf_row">, <figure class="tmblr-full"> : 텀블러 에디터의 고유 템플릿 구역 태그를 활용하여 보정 및 합성된 이미지를 본문 중앙에 꽉 차게 배치하였습닏다. (2-2) <img src="..." srcset="..." sizes="..."> : 명령어를 통해 포토샵으로 작업한 원본 이미지를 불러오고, srcset과 sizes 속성을 통해 방문자의 접속 기기(모바일, PC 등) 화면 너비에 맞춰 이미지 해상도가 자동으로 최적화되도록 반응형 환경 구축. (2-3) <h1>, <h2>, <p>, <br> : 명령어를 이용하여 메인 타이틀, 소제목, 본문, 문의처 등의 문단을 명확히 나누고, 단락 제어 및 줄바꿈을 통해 전체적인 텍스트의 가독성을 높였습니다. (2-4) <b> : 명령어를 활용하여 상호명, 주소, 연락처 등 사용자 반응을 유도해야 하는 핵심 정보의 텍스트를 두껍게 강조하여 시각적 효과 유도하였습니다. (2-5) <ul>, <li> : 명령어를 사용하여 시공 내역 등 여러 특징을 순서 없는 목록(List) 형태로 깔끔하게 정돈하였습니다. (2-6) &#...; : 에디터 호환성 문제로 파싱된 HTML 엔티티 코드를 활용하여, 렌더링 시 방문자 화면에서 한글 텍스트 및 특수기호(✔, 📞, ▲)가 깨짐 없이 정상적으로 출력되도록 연출. (2-7) : 명령어를 사용하여 텍스트 앞에 띄어쓰기(공백)를 삽입함으로써 문단 시작 여백을 보기 좋게 조절하였습니다.
(네이버블로그)
(1) 네이버 블로그 플랫폼은 정책상 에디터 내 HTML 코드의 직접 작성 및 소스 단위의 수정을 제한하고 있어, HTML 명령어를 사용하는 대신 플랫폼에서 기본 제공하는 '스마트에디터(SmartEditor)' 도구를 활용하여 직관적인 형태의 홍보 게시물을 등록하였습니다.
(1-2) 포토샵을 이용하여 매장 전경 및 주요 주방기기 사진의 색감과 해상도를 웹 환경에 맞게 최적화하였습니다.
(1-3) HTML 명령어(<h1>, <b>, <p> 등)를 직접 사용할 수 없는 플랫폼의 제약을 고려하여, 에디터 상단의 텍스트 서식 도구를 적극 활용해 글자 크기를 키우고 굵게 처리함으로써 핵심 정보(상호명, 문의처 등)가 돋보이도록 시인성을 높여 꾸몄습니다.
(포토샵)
(1) (1-1) 포토샵을 활용하여 주방 설비 업체의 홍보용 배너, 로고, 제품 상세 사진 등 웹 블로그 및 SNS 게시에 최적화된 다양한 그래픽 소스를 제작 및 편집하였습니다.
(1-2) 직접 촬영된 현장 및 제품 원본 사진의 불필요한 배경을 제거하고, 시선을 끄는 텍스트와 도형을 적절히 배치하여 직관적이고 정보 전달력이 높은 홍보 이미지 형태로 가공하였습니다.
(1-3) 여러 장의 사진을 하나의 캔버스에 조화롭게 합성하거나, 제품의 특성에 맞는 새로운 배경 이미지를 결합하여 제품의 주목도를 극대화하였습니다.
(2) (2-1) 배경 제거 및 합성
빠른 선택 도구및 자동 선택 도구를 이용하여 닥트, 후드, 냉장고, 인물등 피사체의 외곽선을 정밀하게 추출하고 지저분한 배경을 깔끔하게 제거하였습니다.배경이 제거된 피사체 하단 레이어에 단색 색상을 채워 넣거나 물결 무늬 등의 새로운 텍스처 배경을 삽입하여 피사체가 더욱 돋보이도록 연출하였습니다.
(2-2) 도형 및 문자 도구를 활용한 배너 디자인
사각형 도구와 타원 도구를 사용하여 강렬한 붉은색 계열의 텍스트 박스 포인트를 생성하였습니다.수평 문자 도구를 활용하여 노란색, 흰색 등 대비가 뚜렷한 색상으로 '최저가', '맞춤 제작', '문의처' 등의 핵심 홍보 문구를 삽입하여 정보 전달력을 높였습니다.자유 변형 기능을 이용해 닥트 시공 사진의 텍스트 박스와 글자를 기울여 배치함으로써 단조로움을 피하고 역동적인 시각적 효과를 부여하였습니다.
(2-3) 레이어 스타일을 통한 가독성 개선
물결 배경 등 복잡한 배경이 쓰인 사진 내의 텍스트에는 레이어 스타일의 선또는 그림자 효과 기능을 적용하여, 글자가 배경에 묻히지 않고 뚜렷하게 읽힐 수 있도록 시인성을 개선하였습니다.
(2-4) 이미지 콜라주 및 레이어 관리
가스테이블 홍보 이미지의 경우, 여러 각도에서 촬영된 사진들을 하나의 캔버스로 불러와 이동 도구를 통해 구역별로 분할 배치하는 콜라주 작업을 수행하였습니다. 각각의 텍스트, 도형, 이미지 객체를 별도의 레이어로 분리하여 관리함으로써 수정 및 편집의 효율성을 높였습니다.