01
새로운 기업 이미지를 무엇으로 보여줄까?
- Challenge
- 노후한 홈페이지의 시각적 이미지를 현대적으로 재구성해야 했습니다.
- Approach
- 불필요한 배경 장식을 줄이고 제품과 활용 이미지를 중심으로 방향을 잡았습니다.
- Implementation
- 이미지 전환과 확대 효과를 활용해 역동적인 메인 비주얼을 구성하고 기업·사업·제품 정보의 구획을 정돈했습니다.
02 / PROJECT / CASE STUDY
브랜드의 변화부터, 업무 화면의 제약까지.
기업의 이미지를 새롭게,
업무의 흐름은 명확하게.
썬시멘트(주)
기업명 변경에 따른 브랜드 리뉴얼과 복잡한 업무용 검색·테이블·출력 UI를 함께 고려한 기업 홈페이지 프로젝트입니다.
02 / PROJECT OVERVIEW
달라지는 브랜드와 실제 업무를 함께 고려하다.
2017년에 제작된 기존 기업 홈페이지를 현대적인 브랜드 이미지와 업무 편의성을 고려해 리뉴얼했습니다. 진행 중 기업명이 쌍용기초소재에서 썬시멘트로 변경되어 콘텐츠와 시각적 표현도 함께 조정해야 했습니다.
제품의 활용 이미지를 중심으로 메인 화면을 구성하고 기업·사업·제품 정보를 정리했습니다. 업무용 검색 폼, 데이터 테이블과 성적서 조회·출력 UI를 설계·퍼블리싱했습니다. 실제 검색 백엔드나 데이터 처리 기능은 담당 범위로 표현하지 않습니다.
KEY CONTRIBUTIONS
- 기업명 변경에 따른 브랜드 비주얼 리뉴얼
- 제품 중심의 역동적인 메인 화면 구성
- 사업분야·기업 정보의 구조화
- 업무용 검색 폼 및 데이터 테이블 UI 설계
- 모든 열을 유지하는 모바일 테이블 퍼블리싱
- 성적서 조회·출력 UI 및 인쇄용 화면 스타일 작업
03 / CHALLENGES & SOLUTIONS
브랜드와 업무 환경이 만든 다섯 가지 과제.
시각적 표현과 업무상의 요구조건을 함께 다루되, 실제 구현 범위와 남아 있는 제약을 구분했습니다.
02
진행 중 바뀐 기업명에 대응하다.
- Challenge
- 쌍용기초소재에서 썬시멘트로 기업명이 변경되며 일부 콘텐츠와 브랜드 표현 방향이 확정되지 않았습니다.
- Approach
- 변경된 이름과 브랜드 방향을 화면 전반에 일관되게 반영할 수 있도록 콘텐츠를 점검했습니다.
- Implementation
- 기업·제품을 소개하는 시각 요소와 문구를 조정하고 신규 브랜드 이미지에 맞게 UI를 구성했습니다.
03
복잡한 조회 조건을 어떻게 정렬할까?
- Challenge
- 성적서 유형, 기간, 거래처와 제품 등 업무 화면마다 여러 검색 조건을 배치해야 했습니다.
- Approach
- 조건의 그룹과 결과 확인 순서를 나누고, PC의 우측 버튼 정렬과 모바일의 세로 흐름을 고려했습니다.
- Implementation
- 검색 폼·선택 필드·날짜 입력·버튼과 결과 표를 퍼블리싱했습니다. 현재 정적 데모에는 실제 검색 처리나 서버 연결이 없으며 화면 구성과 입력 UI를 보여줍니다.
04
모바일에서도 모든 열을 유지해야 한다면?
- Challenge
- 고객사는 모바일에서도 가로 스크롤이나 열 숨김 없이 모든 열과 데이터를 한 화면 폭 안에 표시하도록 요청했습니다.
- Approach
- 테이블 구조를 유지한 채 열 너비와 셀 패딩을 배분하고 긴 값이 셀 안에서 줄바꿈되도록 했습니다.
- Implementation
- table-layout: fixed, overflow-wrap: anywhere, white-space: normal과 자연스러운 행 높이를 적용했습니다. 5열·9열 테이블의 헤더 정렬을 유지했습니다. 좁은 화면에서는 한 글자 단위 줄바꿈과 긴 행이 생기는 가독성 한계가 있어 무조건적인 UX 개선 성과로 표현하지 않습니다. 인증서 페이지는 이 제약의 적용 대상이 아닙니다.
05
조회 화면과 출력 화면의 경계를 구분하다.
- Challenge
- 웹 화면에서 성적서 결과를 확인하고 A4 인쇄 환경에 대응하는 화면 스타일 작업이 필요했습니다.
- Approach
- 조회·출력 UI의 작업 범위와 현재 저장소에서 재현 가능한 기능을 구분했습니다.
- Implementation
- 성적서와 A4 인쇄용 화면 스타일 작업은 제공된 프로젝트 원고의 수행 범위입니다. 다만 현재 저장소에는 별도 A4 원본과 openPrintPage() 구현이 없어 출력 화면의 재현·검증은 보류합니다. 아래에는 실제 정적 조회 UI를 더미 데이터로 표시하고, 인쇄 기능이 동작한다고 안내하지 않습니다.
04 / DESIGN & IMPLEMENTATION
기업 화면과 업무 화면을 함께 설계하다.
01 / BRAND & RESPONSIVE
제품 이미지 중심의 브랜드 화면
기업 소개와 제품의 활용 이미지를 중심으로 구성했습니다. PC·모바일에서는 같은 브랜드 메시지가 각 화면 크기에 맞춰 이어집니다.
02 / BUSINESS FORM
그룹화한 검색 조건과 결과 표
실제 정적 조회 화면의 레이아웃을 캡처하되 결과 셀은 모두 공개용 가상 값으로 바꿨습니다. 입력·선택·날짜 UI를 보여주며 검색이나 인쇄의 서버 기능을 재현한 화면은 아닙니다.
03 / RESPONSIVE CONSTRAINT
열은 그대로, 텍스트는 셀 안에서
report.css의 업무 화면 전용 규칙으로 열 폭과 줄바꿈을 조정했습니다. 실제 캡처는 동일한 더미 값을 사용합니다. 고객 요청을 충족하는 구성과 모바일 가독성의 한계를 함께 보여줍니다.
04 / PRINT / EVIDENCE
출력 화면은 원본 확인이 필요합니다
A4 화면 스타일은 제공된 작업 범위에 포함되지만 현재 저장소에 별도 출력 템플릿과 인쇄 함수가 없습니다. 검증할 수 없는 A4 화면을 새로 만들어 실제 작업물처럼 제시하지 않았습니다.
05 / OUTCOME & REFLECTION
요구사항의 충족과 사용성의 한계를 함께 기록하다.
기업의 브랜드 이미지와 실제 업무 흐름을 함께 고려한 기업 홈페이지 리뉴얼 프로젝트입니다. 다양한 화면 크기와 데이터 밀도, 출력 환경의 제약을 화면 설계와 퍼블리싱 관점에서 다뤘습니다.
모든 열을 표시해야 하는 조건에서는 가독성에 한계가 있음을 명확히 인식하고, 요구사항의 충족을 정량적인 사용성 개선이나 업무 성과로 과장하지 않았습니다.
06 / EXPLORE PROJECT
직접 살펴보세요.
기업 소개 메인으로 이동합니다. 업무용 원본의 실데이터 여부는 확인되지 않아 이 페이지에는 더미 데이터 캡처만 사용했습니다.
BACK TO TOP ↑