신입 웹 퍼블리셔

박정흠

안녕하세요! 신입 퍼블리셔 박정흠 입니다. ‘Stay hungry, Stay foolish’ 항상 발전하기 위해 노력합니다. 누구나 할 수 있는 뻔한 노력보다는 저만의 센스와 창의성을 담은 느낌 있는 노력을 하는 창의적인 퍼블리셔가 되겠습니다.

- 웹 표준과 웹 접근성 준수
- 반응형 웹과 크로스브라우징
- 디자이너 & 개발자와의 원활한 커뮤니케이션
- Figma를 활용한 UX/UI 디자인 기획 및 디자인 능력
- HTML, CSS, JS, jQuery를 활용한 퍼블리싱 능력
- react, typescript를 통한 프론트엔드 학습
- java, spring, oracleDB 학습하여 풀스택 프로젝트 경험

성실함

협업 지향

꼼꼼함

신뢰

적응력

신입 퍼블리셔 박정흠 포트폴리오

<h2>🌱&nbsp;프로젝트 소개</h2><ul><li>수행기간 : 2024.12.16 ~ 2024.12.30</li><li>수행인원 : 4명</li><li>기획의도 : K-pop 열풍과 함께 K-Food 등 한국 문화에 대한 전 세계적인 관심이 높아 지고 있는 지금, 외국인 관광객을 대상으로 서울을 소개하기</li></ul><h2>👨🏻‍💻&nbsp;구현 기능</h2><ul><li>반응형 사이트</li><li>Open API</li></ul><h2>🛠&nbsp;사용기술 및 개발환경</h2><ul><li>Figma, HTML5, CSS3, JavaScript, Bootstrap, GitHub</li></ul><h2>🙋🏻‍♂️&nbsp;담당 역할</h2><ul><li>메인페이지</li></ul><h2>🎨&nbsp;디자인 시스템</h2><code>html { font-size: 62.5% }</code><ul><li>1rem = 10px 로 루트 단위를 설정하여 계산을 편하게 함.</li><li>정보 전달, 현대적, 깔끔함을 위해 <code>"NanumSquareNeo"</code> 사용.</li><li>전통적, 현대적 느낌을 조화롭게 표현하기 위한 컬러 선택.</li></ul><h2>🔎 상세 내용</h2>💡 메인페이지① AOS 라이브러리로 동적인 사이트 구현.② JS로 카드의 데이터를 객체로 정의. 가로 슬라이드 구현.③ hover시 펼쳐지는 아코디언 메뉴. 이미지 클릭시 새창으로 사이트 이동.④ 사용자 편의를 위한 scroll to top 버튼.⑤ 반응형<h2>🤔 기술적 이슈와 해결 과정</h2>부트스트랩 스타일과 CSS사이에 충돌이 일어나서 각 팀원 담당 페이지마다 header의 스타일이 다르게 보여지는 현상이 나타났습니다. 그리하여 head태그 안의 부트스트랩 cdn링크를 css링크 보다 상단으로 위치 시키니 스타일의 충돌이 더이상 일어나지 않았습니다.<h2>💡&nbsp;참여 소감</h2>피그마를 활용하여 대략적인 화면 디자인 기획을 하였고 html, css, javascript, bootstrap을 활용하여 기획한 화면의 디자인을 구현해 내는 프로젝트 였습니다.&nbsp; 데이터를 가져올 DB가 없었기 때문에 보여주고 싶은 데이터를 오브젝트 객체에 담아 해당 위치로 불러왔습니다. 요즘 트렌드에 맞는 메인사이트의 디자인적 요소를 최대한 따라서 구현해 보는게 목적 이었기에 레퍼런스 사이트의 애니메이션, 콘텐츠의 레이아웃 등을 중점적으로 벤치마킹 하였습니다.

서울서울

<h2>🌱&nbsp;프로젝트 소개</h2><ul><li>수행기간 : 2025.02.10 ~ 2025.02.16</li><li>개인 프로젝트</li><li>기획의도 : 벅스 사용자로서 기존에 적응형인 벅스 웹사이트의 메인페이지 UX/UI 의 아쉬운 부분을 리뉴얼.</li><li>웹 접근성, 시맨틱, 크로스브라우징, 반응형</li></ul><h2>👨🏻‍💻&nbsp;구현 기능</h2><ul><li>메인 페이지(반응형)</li><li>회원가입 창</li><li>뮤직 플레이어</li></ul><h2>🛠&nbsp;사용기술 및 개발환경</h2><ul><li>HTML5, CSS3, JavaScript, Bootstrap</li></ul><h2>🙋🏻‍♂️&nbsp;담당 역할</h2><ul><li>개인 프로젝트</li></ul><h2>🔎 상세 내용</h2>💡 메인페이지(반응형)① 부트스트랩 캐러셀 오토 슬라이드 기능으로 동적인 느낌을 줌.② PC, 태블릿, 모바일 풀 반응형.💡 뮤직 플레이어① Jasmine 재생 버튼 클릭시, 새로운 창에서 해당 음악 뮤직 플레이어 자동 재생.💡 회원가입 창① 회원가입 유효성 검사. 필수 항목 미수행 시 가입 버튼 disabled. 모두 수행시 가입 완료.<h2>🤔 기술적 이슈와 해결 과정</h2>메인페이지의 각 음악 앨범 카드에 hover시 해당 앨범 카드에만 button이 up되게끔 구현하고 싶었습니다. 처음엔 JS를 사용하여 각 카드의 인덱스에서만 적용되게 끔 코드를 짜야한다고 생각했습니다. 하지만 css선택자 중 ‘후손선택자’ 특성을 활용해보니 불필요한 JS없이 CSS만으로 간단하게 구현이 가능하단걸 알 수 있었습니다.<h2>💡&nbsp;참여 소감</h2>기존 벅스 사용자로서 웹사이트 이용 시 애로사항이 있었는데, 학습한 스킬을 이용하여 좀더 나은 사용자 경험과 UI로 직접 수정할 수 있었다는 것이 매우 흥미로운 개인 프로젝트였습니다. 기본이라 할 수 있는 웹 표준을 준수 하였고 크로스 브라우징까지 고려할 수 있는 좋은 기회였습니다.

Bugs 웹사이트 리뉴얼(Publishing)

<h2>🌱&nbsp;프로젝트 소개</h2><ul><li>수행기간 : 2024.11.04 ~ 2024.11.11</li><li>수행인원 : 5명</li><li>기획의도 : 기존 유전자 검사 서비스 사이트의 적은 재사용성의 문제점을 해결하고자 커뮤니티 서비스를 추가한 ‘유전자 검사 커뮤니티 서비스’ 구축.</li></ul><h2>🛠&nbsp;사용기술 및 개발환경</h2><ul><li>Figma</li></ul><h2>🙋🏻‍♂️&nbsp;담당 역할</h2><ul><li>메인페이지</li></ul><h2>🔎 상세 내용</h2>💡 메인페이지(모바일)① 오토레이아웃 활용.② 하단에 navigation을 두고 클릭시 각 페이지로 이동하게 끔 구현 했다.③ 상단 배너는 프로토타입 지정하여 파랑-&gt;노랑-&gt;파랑 으로 바뀌도록 함.④ 메인 컨텐츠 overflow되는 부분은 vertical scroll 지정 하였다.⑤ 메인 페이지의 이미지,텍스트 부분은 텍스트 프로퍼티, 인스턴스 스왑, 베리언트 사용하여 반복적인 사용에 용이하게 하였다.<h2>💡&nbsp;참여 소감</h2>팀원들과 UX/UI 기획, 디자인을 하면서 협업에 있어 팀원간의 원활한 소통이 얼마나 중요한지 알 수 있었던 좋은 기회였습니다. 피그마 툴 사용이 처음인 우리가 이렇게 조금 배운 것으로 프로젝트를 진행할 수 있을까 걱정이 되었지만, 팀원들과 와이어프레임, 유저플로우, 디자인시스템등을 차차 기획 하면서 어떤식으로 웹,앱 화면을 디자인하면 될지 확신이 섰습니다. 그 이후부턴 좋은 레퍼런스 사이트 등을 참고하며 요즘 트렌드에 걸맞으면서 본인이 디자인하고 싶은 요소들을 잘 녹여내어 디자인하게 됐습니다. 수업 시간에 배운 것 이외에 구현해보고 싶었던 부분은 구글링을 통해 학습하여 팀원들과의 스터디를 통해 원하는 디자인을 잘 구현해 냈습니다.

유링(Figma)

<h2>🌱&nbsp;프로젝트 소개</h2><ul><li>수행기간 : 2023.07.05 ~ 2023.08.05</li><li>수행인원 : 5명</li><li>기획의도 : 애니메이션 추천, 소개, 소통 등을 위한 커뮤니티 사이트 개발</li><li>라프텔, 애니플러스 와 같은 애니메이션 OTT 플랫폼 벤치마킹</li></ul><h2>👨🏻‍💻&nbsp;구현 기능</h2><ul><li>메인 페이지 설계 회원가입, 로그인, 로그아웃, 전체 검색 기능</li><li>마이 페이지 정보 변경, 프로필 사진 첨부, 회원 탈퇴, 이메일 API를 사용한 인증 시스템</li><li>커뮤니티(테마 추천, 팬아트, 리뷰, 굿즈) 사진 첨부, 게시판 상세조회, 예고편 조회, 좋아요, 조회 수, 리뷰 별점, 댓글 등록/수정/삭제, 게시글 등록/수정/삭제</li></ul><h2>🛠&nbsp;사용기술 및 개발환경</h2><ul><li>Java, HTML5, CSS3, Javascript, Jsp&amp;servlet</li><li>JSTL, jQuery</li><li>OracleDB</li><li>Eclipse, Visual Studio Code</li><li>Apache Tomcat 9.0</li><li>GitHub</li></ul><h2>🙋🏻‍♂️&nbsp;담당 역할</h2><ul><li>유스 케이스 및 DB 구현</li><li>테마 추천, 테마 추천 상세 , 굿즈 게시판 구현</li></ul><h2>🔎 상세 내용</h2>💡 테마 추천 게시판<ul><li>DB 에 저장된 섬네일, 제목, 설명 목록들을 조회</li><li>9 개의 테마 중 하나 클릭 시 해당 테마 상세페이지로 이동</li></ul>💡 테마 추천 상세 게시판<ul><li>해당 테마에 따라 DB에 저장된 제목, 설명, 예고편 동영상을 조회할 수 있음</li><li>Preview 버튼 클릭 시 DB에 저장된 해당 유튜브 동영상을 모달창으로 조회</li><li>사용자 가독성을 위해 scroll to top 버튼 기능 구현</li></ul>💡 굿즈 게시판<ul><li>DB 에 저장된 사진 조회 및 좋아요 버튼 클릭 시 버튼 색깔 바뀌며 해당 DB 테이블에 값 저장. 다시 한번 누를 시 버튼 색깔 바뀌며 DB 에서 값 삭제.</li><li>사용자 가독성을 위해 scroll to top 버튼 기능 구현.</li></ul><h2>💡&nbsp;참여 소감</h2>초기 설계 방법과 팀원 간 소통의 중요성을 배웠습니다. 처음 프로젝트를 시작하다 보니 시행착오가 많았습니다. 주제를 재선정 하는 일도 있었고 ERD 설계 수정도 수없이 많이 했습니다. 기존 유명 사이트들을 벤치마킹하여 사용자 프로젝트 입장에서 이용해 보면서 화면 구현에 있어서 많은 공부가 되었습니다. 팀원 개개인의 생각을 조금 더 조화롭게 구현해 내기 위해 많은 회의를 하였습니다. 그리고 GitHub 를 처음 활용해 보면서 조금 더 효율적인 협업이 가능하다는 것도 알게 되었습니다. 이러한 시행착오와 경험을 바탕으로 앞으로는 더 꼼꼼하고 원활한 소통으로 협업을 진행해야겠다는 생각을 하게 되었습니다.

애니버스(Full Stack)

<h2>🌱&nbsp;프로젝트 소개</h2><ul><li>수행기간 : 2023.08.18 ~ 2023.10.04</li><li>수행인원 : 6명</li><li>기획의도 : 1인 가구 및 바쁜 현대인들을 위한 ‘펫 시팅’ 서비스 제공</li><li>결제, GPS, 이메일 인증 API 사용 경험 및 채팅기능 적용</li></ul><h2>👨🏻‍💻&nbsp;구현 기능</h2><ul><li>메인 페이지 회원가입, 로그인, 로그아웃</li><li>마이 페이지 내 정보, 내 반려견, 찜목록, 내가 쓴 게시글, 회원 탈퇴, 신고, 펫시터 및 일반회원 신청, 예약 목록 조회 공지사항 조회, 작성, 수정, 삭제</li><li>예약 페이지펫 시팅 서비스 예약, 결제 API 적용</li><li>리뷰 페이지게시글 리스트 조회, 게시글 검색, 사진 첨부, 게시판 상세조회, 조회 수, 댓글 등록/수정/삭제, 게시글 등록/수정/삭제, 페이지 네이션</li><li>FAQ 조회, 작성, 수정, 삭제, 검색</li><li>서비스 이용 중 반려견 위치 GPS API 적용</li><li>채팅 기능</li><li>관리자 페이지</li></ul><h2>🛠&nbsp;사용기술 및 개발환경</h2><ul><li>Spring, JSTL, Ajax, MyBatis</li><li>Java, HTML5, CSS3, JavaScript, JSP&amp;Servlet</li><li>OracleDB</li><li>Eclipse, Visual Studio Code</li><li>Apache Tomcat 9.0</li><li>GitHub, Kakao map, KG 이니시스</li></ul><h2>🙋🏻‍♂️&nbsp;담당 역할</h2><ul><li>게시글 목록 조회 및 상세조회</li><li>게시글 삽입, 수정, 삭제, 검색</li><li>댓글 삽입, 수정, 삭제</li><li>채팅 기능</li></ul><h2>🔎 상세 내용</h2>💡 게시글 리스트 조회, 페이지네이션, 검색 기능① 게시글을 생성할 때 게시글 번호를 시퀀스 로 생성하고 게시글 목록 조회 시 게시글 번호 내림차순으로 정렬. 페이지 네이션을 통해 특정 페이지로 이동 가능.② 로그인 시에만 글쓰기 버튼 보임, 클릭 시 게시글 작성 페이지로 이동.③ 키워드 검색 시 해당 키워드를 포함하는 게시글 조회 가능.💡 게시글 수정, 댓글① 해당 게시글의 조회 수 표시, 증가. ② 로그인 상태에서 자신이 작성한 글일 경우 수정∙삭제 버튼 보임, 수정 버튼 클릭 시 게시글 수정 페이지로 이동. ③ 게시글 제목, 내용, 이미지 수정 가능. ④ 댓글, 댓글의 댓글 작성 가능. 자신이 작성한 댓글 수정∙삭제 가능.💡 채팅 기능➀ WebSocket 을 이용한 채팅 기능 구현. 로그인 후 채팅하기 버튼 클릭 시 해당 예약 서비스로 연결되어 있는 펫시터 와 일반회원의 채팅방이 생성됨. ② 보낸 메시지가 DB에 저장. 저장된 메시지 목록을 서로가 조회함.③ 상대방이 채팅창을 보고 있으면 읽음 표시.<h2>💡&nbsp;참여 소감</h2>Spring 프레임워크를 학습한 후 이번 프로젝트를 통해 데이터를 조회, 삽입, 수정, 삭제를 해보며 서버, 백엔드 개발이 뒤에서 일어나는 로직 처리에 있어서 얼마나 중요한 일인지 한번 더 공부할 수 있는 발전적인 기회였습니다. 세미 프로젝트 때 구현해 보지 못했던 게시글, 댓글 관련 기능을 이번 파이널 프로젝트 때 구현해 보았고 어렵게 생각했던 채팅 기능을 동료와 여러 시행착오 끝에 구현해 내서 너무나 뿌듯했습니다. 새로운 API 도 적용함으로써 세미 프로젝트 때 보다 한 단계 발전한 사이트 구현이라고 생각합니다.