AI 갤러리 사이트를 구축했습니다. 기존에는 Vue와 Nuxt.js 위주로 작업했지만, 이번 프로젝트를 통해 React / Next.js 기반 프론트엔드에 본격적으로 도전했습니다. 상태 관리는 Zustand, 로그인은 JWT 토큰 발급 방식으로 구현했습니다. Next.js의 서버 사이드 장점을 살리기 위해 use client 사용을 최소화하고, 서버 컴포넌트와 클라이언트 컴포넌트를 분리하는 데 신경 썼습니다. 검색 영역은 버튼 클릭 방식이 아니라 검색어 입력 시 자동으로 결과가 반영되도록 구성했고, 갤러리 레이아웃은 Masonry를 활용해 화면 크기에 따라 열이 자연스럽게 조정되도록 만들었습니다. 서브페이지 썸네일 영역은 마우스 휠 스크롤로 탐색할 수 있게 처리해 이미지 감상 흐름이 끊기지 않도록 사용자 편의성을 고려했습니다.
어린이·청소년 교통비 지원 사이트의 실제 프로젝트 착수 전, 밑에 디자이너들에게 참고하라고 직접 제작한 시안입니다. 3D로 구현한 어린이·청소년 캐릭터를 메인 키비주얼에 적극 활용해 사이트의 친근함과 신뢰도를 높였습니다. 내용란이 텍스트 위주로만 구성되면 가독성이 떨어질 수 있어, 도식/표(차트, 다이어그램 등)를 활용해 정보 전달력을 크게 높였어요. 반응형 디자인까지 고려해 마이페이지 쪽에는 카드 형식 UI를 도입, 모바일 환경에서도 편하게 쓸 수 있도록 신경 썼습니다.
CJ ENM의 CJ AMEX 광고솔루션 홈페이지 리뉴얼 제안 작업을 진행했습니다. 내부적으로는 거의 확정 단계였고, 별다른 이슈 없이 시안을 만들었기에 계약까지 자연스럽게 이어질 줄 알았어요. 특히 영화, 드라마, 연예인 등 CJ ENM만의 콘텐츠 감성을 디자인에 담을 수 있겠다는 기대도 컸는데, 아쉽게도 최종 계약이 무산돼 조금은 허탈하고 아쉬웠던 프로젝트였습니다.
화성시 무상교통 디자인을 리디자인했습니다. 기존 디자인은 너무 보험사 느낌에 가까워 브랜딩에 완전히 실패한 상태였고, 무상교통의 친근함/공공성/트렌디함이 전혀 느껴지지 않았어요. 그래서 화성시의 대표 캐릭터 코리요를 메인 비주얼로 세우고 “코리요와 함께 지구를 살리자”는 스토리텔링/컨셉을 새롭게 잡아 여기에 3D 오브젝트까지 적극 활용해 시각적 임팩트와 재미를 더했습니다. 이 작업은 부하직원들이 참고할 수 있도록 트렌디하고 완성도 높은 시안의 예시로 만든 점도 중요한 포인트였어요.
중고차 앱 디자인 프로젝트가 거의 끝나갈 무렵, 갑자기 “웹 홈페이지(관리자 페이지)도 필요하다”는 요청이 들어와 급하게 추가 작업을 진행하게 됐습니다. 시간은 턱없이 부족하고, 일정도 타이트했기 때문에 이번엔 스피드에 최대한 집중해서 빠르게 디자인을 완성하는 것이 핵심 목표였습니다. 특히 퍼블리셔와 긴밀하게 소통하면서 개발/퍼블리싱이 편한 구조 불필요한 복잡함 없이 핵심 정보가 한눈에 들어오는 실무 최적화 UI로 작업을 진행했습니다.
KOREAN RE에서 회사 내부용 업무관리 시스템 디자인을 맡았습니다. 자사 맞춤형 업무 시스템 디자인은 이번이 처음이어서 UI/UX 전반에 걸쳐 어떻게 하면 실제 사용자가 더 쉽게, 효율적으로 쓸 수 있을까 고민을 많이 하며 디자인과 퍼블리싱을 함께 진행했습니다. 통합검색, 지도 기반 위치찾기, 국가별 검색 등 다양한 기능이 들어가는 대형 프로젝트였기 때문에 각 기능이 조화롭게 작동하면서 최대한 직관적인 흐름을 만들 수 있도록 신경 썼어요. 특히 이번 작업은 Microsoft의 쉐어포인트(SharePoint) 플랫폼 위에서 커스터마이징하는 방식이라 초반에 쉽지 않았지만, 프로젝트를 하면서 개발과 플랫폼에 대해 자연스럽게 배우고, 실무 역량을 한 단계 더 넓힐 수 있었던 재미있는 경험이었습니다.
기업용 웹 조직도(Org Chart) 백오피스 디자인을 진행했습니다. 이번 프로젝트는 실제 현업에서 많이 쓰는 관리자(백오피스) 솔루션 디자인이어서 화려함보다는 안정감과 실용성에 중점을 두었습니다. 컬러는 누구나 편하게 쓸 수 있는 무난한 블루 계열로 신뢰감과 세련미를 동시에 잡으려고 했어요. 기존의 이미지 위주 UI 대신, 조직도 트리 구조를 직접 **자바스크립트(JavaScript)**로 구현해 실제 업무에서 사용자들이 쉽고 빠르게 조직 구조를 한눈에 파악하고 관리할 수 있도록 설계했습니다. 이미지, 아이콘 등 시각적 재미를 많이 줄 수 없는 한계가 있었던 만큼, 각 요소의 여백 블루 계열의 컬러 쉐이드 라인/구분자 미묘한 상태 변화(hover, active 등) 이런 세세한 디테일에 신경을 곱절로 썼습니다.
뉴스웨이 홈페이지를 운영하며 상단 타이틀 아래에 들어가는 띠 배너(가로 배너) 작업을 진행했습니다. 이 배너는 크기 자체가 가로로 길고, 세로가 좁은 띠 배너 형식으로만 제작해야 한다는 제한이 있었어요. 하지만 작은 제약 속에서도 매번 다른 테마, 다양한 이미지를 만들어 한눈에 이목을 집중시키는 디자인을 시도했습니다. 그때그때 테마에 맞춰 가장 중요한 메시지나 이미지를 배치하고 이미지만 봐도 무슨 내용인지 직관적으로 알 수 있도록 디자인에 힘을 줬던 기억이 남습니다.
뉴스웨이 웹사이트 리뉴얼을 진행했습니다. 기존 사이트는 카테고리 정렬이 불편해서 사용자 경험이 많이 떨어졌고, 뉴스웨이만의 브랜드 컬러와 아이덴티티가 전혀 느껴지지 않는 상태였습니다. 이번 리뉴얼에서는 카테고리 정렬 UX를 대폭 개선해 주요 콘텐츠를 쉽게 탐색할 수 있도록 했고, **GNB(글로벌 네비게이션 바)**에는 뉴스웨이 고유의 컬러를 입혀 브랜드 아이덴티티를 명확히 드러냈습니다. 포토 페이지는 기존의 딱딱한 사각형 구조에서 벗어나 라운드 디자인을 적용해 전체적으로 부드럽고 현대적인 인상을 강조했습니다. 또한 이슈/기획 영역도 전면적으로 재구성해 시각적 안정감과 브랜드만의 컬러, 뉴스웨이만의 차별성을 확실히 표현할 수 있도록 신경 썼습니다.
조선왕조실록 영문 사이트 디자인을 진행했습니다. 프로젝트 운은 진짜 있는데, 항상 이름 있는, 굵직한 프로젝트를 맡게 되는 것도 디자이너로서 뿌듯한 부분입니다. 이번 작업에선 “디자인 그 자체” 못지않게 데이터를 어떻게 쉽게 조회하고, 사용자가 편하게 실록을 검색/탐색할 수 있을까? UI/UX에 가장 중점을 두었습니다. 컬러는 코랄(Coral), 차콜(Charcoal), 골드(Gold) 조합을 활용해 무게감과 고급스러움, 그리고 왕의 상징을 골드로 담아냈습니다. 메인 비주얼에는 훈민정음 글자를 오버레이해 하늘 배경과 겹치게 배치함으로써 역사와 문화적 깊이를 시각적으로 표현했습니다. 검색 UI는 상단에 왕대별 검색, 년도 검색을 함께 배치해 사용자가 원하는 정보를 즉시 찾아볼 수 있도록 즉각적인 접근성에 신경 썼습니다.
스마트SME에서 차세대 그룹웨어 제안 시안을 제작했습니다. 기존 그룹웨어 디자인은 SI(시스템 통합) 스타일이 너무 강하고 최신 트렌드가 제대로 반영되어 있지 않아 새로운 방향성을 제시하기 위해 이번 시안을 만들었습니다. 레이아웃은 좌측: 근태정보 우측: 스케줄 달력 중앙: 공지사항 & 경조사 알림 하단: 메일 영역 이렇게 주요 기능들을 박스 형태로 그룹핑(Grouping)해서 시각적으로 명확히 구분하고, 각 컨텐츠의 영역이 한눈에 들어오도록 구조화했습니다. 컬러는 블루, 오렌지, 차콜(Charcoal) 조합으로 세련되면서도 가벼워 보이지 않도록 균형 있게 디자인했습니다.
스마트SME에서 솔루션 키비주얼을 제작하게 되었습니다. 기존 비주얼이 유플러스 팀장님께서 “마음에 들지 않는다”는 피드백을 주셔서 전면 리뉴얼을 진행하게 됐어요. 이전 비주얼은 너무 많은 오브젝트가 한 화면에 얽혀 있어서 정작 중요한 정보 전달력이 약하다는 단점이 있었습니다. 이를 개선하기 위해 메인 오브젝트와 서브 오브젝트를 명확히 분리하고, 직관적으로 한눈에 이해할 수 있는 이미지로 키비주얼을 새롭게 구성했습니다. 이미지만 봐도 각 솔루션의 특징을 자연스럽게 유추할 수 있도록 정보 전달에 중점을 두고 디자인을 완성했습니다.