안녕하세요, 웹 퍼블리셔
우수정 포트폴리오 사이트입니다.
방문해주셔서 감사합니다.
사용자 경험을 생각하는 웹 퍼블리셔
웹 접근성과 웹 표준을 중요하게 생각하며, 사용자가 편리하게 이용할 수 있는 화면을 구현하는 퍼블리셔입니다. 공공기관 및 기업 프로젝트를 비롯한 여러 웹 서비스를 경험하며 HTML, CSS, JavaScript를 활용한 반응형 웹 구축과 UI 구현 역량을 쌓았습니다. 다양한 사용자 환경을 고려하며 안정적이고 일관된 웹 화면을 구현하는 것을 중요하게 생각합니다.
디자인과 개발을 연결하는 협업 능력
웹 디자인 경험을 바탕으로 디자인 의도를 정확하게 이해하고 화면으로 구현하며, React 기반 프로젝트와 프론트엔드 학습을 통해 개발 구조와 컴포넌트 기반 UI에 대한 이해도 함께 쌓아왔습니다. 디자인과 개발 양쪽의 관점을 이해하며 기획자, 디자이너, 개발자와 원활하게 협업할 수 있는 퍼블리셔를 지향합니다.
프로젝트 경험으로 쌓은 실행력
공공기관과 기업 서비스 프로젝트에서 신규 구축부터 리뉴얼, 운영 및 유지보수까지 참여해왔습니다. 프로젝트마다 다른 개발 환경과 업무 방식에 적응하며 요구사항에 맞는 화면을 구현해왔고, 작업 과정에서 발생하는 수정 사항과 이슈에도 유연하게 대응해왔습니다. 맡은 업무를 끝까지 책임지고 완성도 높은 결과물을 만들기 위해 노력합니다.
실제 가구 브랜드 사이트를 비교 분석하여 장점을 결합한
1인 가구를 타겟으로 한 가상의 가구 쇼핑몰 사이트 이로케를 새롭게 구축하였습니다.
이 프로젝트에서는 사용자 쇼핑몰 사이트와 관리자 페이지를 구분하여 개발했습니다.
관리자는 관리자 페이지를 통해 상품을 등록하고,
사용자는 쇼핑몰 페이지에서 등록된 상품을 확인한 후 장바구니 및 주문하기 기능을 통해 상품을 주문할 수 있도록 했습니다.
또한 공지사항, 문의 게시판 등 사용자와의 소통을 위한 기능도 추가하여 쇼핑몰 운영에 필요한 다양한 요소를 구현했습니다.
처음 React를 사용하여 진행한 프로젝트였기 때문에 많은 시행착오가 있었지만, 그 과정에서 얻은 성취감이 담긴 결과물이 되어 매우 의미 있는 작업이었습니다.
Stack
role
디자인 방향성 결정, CSS 규격화
관리자 페이지 상품관리
상품 이름, 이미지, 사용 옵션/키워드 설정 등록, 재고 등록, 상품 가격, 할인율 자동 계산 후 최종 가격 반영
Axios와 Express를 사용하여 프론트에서 등록한 정보를 백엔드로 전달해 데이터베이스에 저장했습니다.useEffect, useState를 사용하여 실시간으로 변경 값을 적용합니다.
사용자 페이지 상품목록, 상품상세
등록된 상품 목록 수, 상품 정보 조회, 옵션 값 추가 금액, 정보 반영 후 장바구니로 전달
Axios와 Express를 사용하여
관리자 페이지(Port 3000)에서 백엔드에 등록한 데이터를
사용자 화면(Port 5500)으로 가져올 수 있게 했습니다.
Solutions
깃허브 페이지에 리액트 앱 호스팅
빌드파일을 올렸지만 화면이 하얗게 나오는 문제
${process.env.PUBLIC_URL}를 사용하여
자동으로 public폴더 위치를 잡게 수정했습니다.
after요소에 적용된 FontAwsome 폰트
직접 i로 불려온 FontAwsome은 보이지만 font로 적용시키면 오류
Preview
신라호텔 서울의 기존 웹사이트의 단점을 분석하고 사용자 편의성과 고급스러움을 강조하여 리뉴얼 작업을 진행했습니다.
이 프로젝트는 타 프로젝트 팀이 작업한 기존 사이트에 실제 사용되는 다양한 API들을 통합하는 작업이었습니다.
팀원마다 네이버 로그인 API, 토스페이, TinyMCE API 등 호텔 예약과 관련된 기능을 제공하는 API들을 선정하여 구현했습니다.
짧은 작업 기간이었지만 일상에서 자주 접하는 API들을 활용하며 실제적인 기술 경험을 쌓을 수 있었습니다.
Stack
role
네이버 로그인 API 연동
Access Token을 받아와 네이버 Developers 사이트에서 설정한 CallBack URL로 정보를 보냅니다.Preview
해외 여행의 증가로 향수 수요가 증가하면서 브랜드의 높은 평판과 웹페이지에 대한 관심도 증가를 반영하여
조말론 런던 웹사이트를 주제로 React Native를 이용한 안드로이드 앱을 만들기로 결정했습니다.
일반 소개 페이지와 게시판 뿐만 아니라 슬라이드, 지도 등 API를 이용한 기능도 적용했습니다.
Stack
role
문의 게시판
게시판 등록, 조회, 수정, 삭제
SNS 웹뷰
인스타그램, 카카오채널, 유튜브 웹뷰
메인 배너 슬라이드
Swiper API를 이용하여 자동 슬라이드와 좌우 슬라이드 버튼이 적용되도록 작업했습니다.Preview
퍼블리셔 포트폴리오 사이트를 프론트엔드 포트폴리오 사이트로 리뉴얼 했습니다.
2025년 트렌드를 반영하여 눈의 피로를 줄여주는 다크모드 스타일로 디자인을 변경했고,
디자인 중심의 내용에서 벗어나 기능과 기술적인 부분을 상세히 설명할 수 있도록 구성했습니다.
기존 사이트에서는 jQuery 위주로 사용했으나, 이번 리뉴얼을 통해 수정하거나 새로 추가된 기능들은
모두 JavaScript로 작성하여 코드의 효율성을 높였습니다.
최종적으로 React, SCSS, Node.js를 사용해 관리하기 편한 사이트로 개선하는 것이 목표입니다.
Stack
link
Preview
Stack
