포트폴리오/웹사이트 (19) 썸네일형 리스트형 KINX 성과관리시스템 2019. 11. 담당파트 : 디자인 100% 성과관리시스템 개편에 따라 디자인 파트를 담당. 채용 관리 시스템 프론트 엔드(지원자용) 디자인 및 코딩 2021.01 담당파트 : 디자인 100%, html 코딩 100% / 사용 프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe Dreamweaver CC 신규입사자 채용시스템을 자체 개발하면서 프론트엔드 디자인과 코딩 작업을 담당해, 약 27개 정도의 페이지를 제작하였다. Google NotoSans를 기본 폰트로 하였으며 포인트 컬러는 kinx.net 포인트 컬러와 동일한 컬러로 설정. KINX 피어링포럼 2016 2016.03 담당파트 : 디자인 100%, html 코딩 100% / 사용 프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3, Adobe Dreamweaver CC 고객사 및 관계사를 대상으로 매년 실시하는 KINX의 대표 행사 '피어링포럼'의 안내/신청 사이트이다. 1페이지 형식이라 사이트라고 하기에 좀 그렇긴 하지만 지난 행사 안내 페이지도 있으니 사이트라고 봐도 좋을 듯 하다. 초기 3가지 디자인으로 시안을 뽑았으며 각 시안마다 2종류(길고 짧은 차이)의 레이아웃이 있다. 개인적으로는 3번째 시안이 채택되었으면 했는데, 행사에 필요한 다양한 물품 등에 디자인을 공통으로 적용해보니 결과적으로는 명/채도가 높고 R값이 상대적으로 높은 최종안(2안)이 눈에도 잘 .. 자동차 튜닝 업체 티샤인 웹사이트 메인 시안 2015.12 담당파트 : 디자인 100%, 개발 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 꽤 오래 전 '티샤인'이라는 자동차 튜닝업체의 홍보용 웹사이트를 만든 적이 있었다. 시간이 흘러 우연히 자동차가 주인공인 멋진 배경 이미지들을 구하게 되었고, 심플한 시안이 떠올라 디자인 포트폴리오용으로 만들어본 '티샤인' 메인 시안들이다. 재미있는 건 해당 업체 오너가 내 포트폴리오 사이트에 구경왔다가 이 시안들을 보고 사이트 리뉴얼을 (3번째 시안을 콕! 찍어서) 의뢰했고, 실제 제작까지 이어졌다는 것. 쎈닷컴 2015 담당파트 : 디자인 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 '신사고피클'이 브랜드명을 '쎈닷컴'으로 변경하면서 사이트도 함께 리뉴얼했다. (관련부서의 요청에 따라) 메인페이지에서 노출되는 배너 수를 늘리고 컨텐츠 추가에 따라 빠르고 효과적으로 대처할 수 있는 레이아웃에 중점을 두고 디자인하였다. 내부 및 고객 반응이 상당히 좋았으며, 내가 좋은책신사고를 퇴사한 후에도 쎈닷컴이 서비스를 종료할 때(2021.12.)까지 전체적인 레이아웃은 계속 유지된 것으로 알고 있다. 인트로 쎈닷컴 - 고등 메인 쎈닷컴 - 중등 메인 쎈닷컴 - 초등 메인 쎈닷컴 비채택 시안들 2015년 제작 담당파트 : 디자인 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 시안 작업 전 진행했던 PT를 통해 호응도가 높았던 사이트들 몇 개를 벤치마킹해 디자인한 시안들이다. 특히 모바일 환경을 고려해 반응형 레이아웃으로 디자인했던 시안은 내부 개발의 기술적 한계로 채택은 되지 않았지만 반응이 좋았다. 시안 A 시안 B-1 (모니터 해상도가 높은 경우) 시안 B-2 (모니터 해상도가 낮은 경우) 시안 C 데님코리아 웹사이트 2016년 제작 담당파트 : 디자인 100%, 코딩 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3, 그누보드 아는 동생이 본인이 다니는 청바지 생산업체의 사이트 구축을 의뢰해 작업한 사이트이다. 인덱스에 나열할 데이터가 몇 개 없어서 사이트 메인에 각 메뉴별 바로가기를 메인비주얼로 구성하여 이를 보완했고, GNB 영역에 청바지 원단 느낌의 이미지를 배경으로 활용했다. 그간 사이트 게시판으로 사용했던 '제로보드'의 보안 취약 문제가 지속적으로 발생해서 처음으로 그누보드를 사용해 보았다. 아래는 모바일 환경을 고려한 반응형 디자인이다. 위의 디자인으로 결정 후 추가로 디자인 해본 건데 실제로 반응형 디자인이 훨씬 나았겠지만 클라이언트 쪽에서 반응형 .. 홈플러스 e파란재단 블루타운 2014년 제작 담당파트 : 디자인 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 홈플러스 사회공헌재단인 e파란재단에서 진행하는 농어촌 마을개선사업 사이트 의 시안 디자인. 지인의 소개로 디자인 파트에 참여하였다. 커뮤니티 페이지의 레이아웃은 핀터레스트를 참고(도용?)했다. 좋은책신사고 교과서 웹사이트 2012.08 담당파트 : 디자인 100% / 사용프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 교과서 영업을 하기 위해 교사들에게 수업 관련 서비스를 제공하는 것이 목적인 교과서 웹사이트. 당시 출판기획 본부장이 내부 디자인이 식상하다고 외부 웹에이전시와 멋지게 만들어보겠다면서 야심차게 시작했다가 예산 대비 참담한 수준의 퀄리티로 망신만 당하고 결국 내부에서 다시 진행하게 되었다. 오픈 해야 하는 날짜는 정해져 있는데 외주 진행한다고 일정 대부분을 허비해, 꽤 많은 작업량이었음에도 불구하고 디자인 작업 기간은 일주일도 채 주어지지 않았던 프로젝트였다. 덕분에 일 받아온 팀장새끼는 집에서 쉬는데 나 혼자 토요일, 일요일까지 출근해야 했다. 작업은 기한 내에 늦지.. 좋은책신사고 교과서 웹사이트 비채택 시안 2012.08 담당파트 : 디자인 100% / 사용프로그램 : 포토샵 CS3, 일러스트레이터 CS3 좋은책신사고 교과서 사이트 제작 시 디자인했던 두 가지 시안 중 채택되지 않은 시안이다. 짜여진 레이아웃이 아닌 여백과 포인트 이미지로 일반적인 교과서 사이트와 차별화해보았다. (* 포인트 이미지는 채택 후 교과서를 펼쳐놓은 이미지로 변경할 계획이었음) 좋은책신사고 교과서 2007 개정교육과정 웹사이트 2012.04 담당파트 : 디자인 100% / 사용프로그램 : 포토샵 CS3, 일러스트레이터 CS3 2007년 개정된 교육과정 교과서를 위한 사이트로 패밀리 사이트들과 톤앤매너를 유지하면서, 포털 사이트의 레이아웃으로 디자인을 요청한 것에 대한 결과물이다. 좋은책신사고 신사고피클 리뉴얼 2011.10 담당파트 : 디자인 100% / 사용 프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 좋은책신사고의 수학인강 사이트인 신사고피클(현 쎈닷컴)의 디자인 리뉴얼. 내외부 디자인들 간의 경쟁 시안을 거쳐 채택되었다. 초, 중, 고등 타겟별로 디자인을 차별화했으며, 페이지 이동을 최소화하여 원하는 강좌로 빠르게 접근할 수 있도록 액션스크립트로 구현한 메인 비주얼이 포인트이다. 신사고피클 - 고등 메인 신사고피클 - 중등 메인 신사고피클 - 초등 메인 좋은책어린이 웹사이트 시안 2011.01 담당파트 : 디자인 100% / 사용 프로그램 : Adobe Photoshop CS3, Adobe Illustrator CS3 좋은책어린이 사이트 리뉴얼을 위해 작업했던 시안들이다. 실제 리뉴얼은 다른 분의 디자인으로 진행되었다. ㅋ 시안 A 시안 B-1 (1번 메뉴 선택 시) 시안 B-2 (2번 메뉴 선택 시) 시안 C 서울숲사랑모임 웹사이트 리뉴얼 2009.05 담당파트 : 디자인 100%, 코딩 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0, Flash MX (사)서울그린트러스트 재단의 서울숲 후원 커뮤니티 리뉴얼 작업. 컨텐츠와 개발을 제외하고 사이트 기획, 디자인, 코딩과 프로그래밍 기획까지 거의 모든 프로세스를 맡아 진행했다. 응암교회 홈페이지 리뉴얼 2009.01 담당파트 : 디자인 100%, 코딩 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0, Flash MX, 제로보드 이 교회에 다니는 친한 동생의 의뢰로 작업한 응암교회 홈페이지 리뉴얼 작업이다. 디자인 외에 게시판/회원가입 부분 등의 개발영역(제로보드)까지 손봤으며 컨텐츠의 양도 예상을 뛰어넘어서 제작 완료까지 상당한 기간이 소요됐다. 프레시안무비 메인 2008.11 담당파트 : 디자인 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0 인터넷신문 프레시안(http://www.pressian.com) 측 요청으로 작업한 프레시안무비 메인 리뉴얼. 본지와의 톤앤매너를 준수하면서 최대한 프레시안무비만의 색을 가질 수 잇도록 하는 것에 중점을 두고 디자인함. 서울그린트러스트 웹사이트 리뉴얼 2007.12 담당파트 : 디자인 100%, 코딩 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0, Flash MX 해당 재단에서 근무하는 친구를 통해 브릿지 사이트 정도로 제안이 들어왔으나 후원하기 기능 추가를 역제안하면서 사이트 전면 리뉴얼로 작업규모가 확대된 경우이다. 사업소개 컨텐츠의 비주얼을 강화하여 후원의 필요성을 강조하는 데에 중점을 두고 디자인하였다. 강남대학교 경영학부 리뉴얼 2004.12 담당파트 : 디자인 100%, 코딩 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0, Flash MX, 제로보드 해당 학부에서 강의하는 선배의 소개로 작업한 사이트. 컨텐츠는 주기적으로 업데이트가 되고 있었으나 제작한 지 오래 된 사이트라 디자인을 개선하고 싶다는 것이 클라이언트의 요청이었다. 제작 중간에 강의자료실이 필요하다는 요청이 있어서 제로보드를 설치&이용했다. * (지금 생각해보면 말도 안 되지만) 메인 카피도 내가 지었다. 이미지로 쓴 해바라기 사진 덕에 떠오른 문구가 '해바라기처럼 향기로운 사람들'이었는데 사실 해바라기는 향기가 나지 않는 꽃이라고 한다. 국회의원 김태식 홈페이지 2004.01 담당파트 : 디자인 100%, html 코딩 100% / 사용 프로그램 : Adobe Photoshop 8.0, Adobe Illustrator 7.0, Flash MX 학교 선배의 소개로 작업한 민주당 김태식 의원(당시 국회부의장)의 17대 총선용 홈페이지. 그림같은 느낌(?)의 디자인을 요청해서 당시에는 생소했던 캘리그라피를 기반으로 작업하였으며 영화 ＜취화선＞이나 ＜스캔들＞의 프로모션 사이트를 참조했다. 먹으로 표현된 요소의 대부분을 플래시를 이용해 먹이 번지는 무브를 주었고 글꼴도 명조체 계열의 폰트를 메인으로 사용해 배경과 어울리도록 했다. 플래시 만든다고 고생이 많았다. 당시엔 누구 못지 않게 일에 대한 열정이 넘쳤다. 이전 1 다음
