미리보기
기본 정보
- 해당 기능의 밑바닥 원리까지 파고드는 집요함이 있습니다. - 하나를 구현하더라도 다양한 상황을 생각해봅니다. - 혼자보다는 사람들과 협업하여 결과물을 만드는 것에 큰 성취감을 느낍니다.
기술 스택
HTML/CSS, JavaScript, TypeScript, React, Next.js, Git, Figma
경력
(주)유리프트
팀원 | 콘텐츠개발
2023.07. ~ 2024.02. (8개월)
- 노션에 작성된 문제를 CMS에 업로드 할 수 있도록 마크다운으로 변환하는 페이지 제작
문제상황
- 퀴즈, 문제 이미지 및 내용을 노션에 작성된 포맷 그대로 CMS에 업로드 필요
→ 이미지, 마크다운으로 변환하여 다운로드 하여 업로드 시, 공수가 많이 듬.
- 퀴즈, 문제 이미지 및 내용을 노션에 작성된 포맷 그대로 CMS에 업로드 필요
해결
- 노션의 마크다운 포맷을 만드는 코드를 분석, 입력 필드에 맞게 텍스트 값만 복사/붙여넣기하면 노션에 보여지는 형태로 마크다운 생성
- SQL 교육 웹드라마 원고 집필 & 미니 프로젝트 구현 + 해설 작성
문제 상황
- 1부작 드라마, 3부작 드라마 원고와 해당 에피소드 별 문제 상황 및 쿼리 작성
해결
- 문제 상황 정의 및 스키마 정의, 데이터 생성, 쿼리 작성
제작한 문제 상황
- 주어진 조건을 사용하여 도서관 DB에서 특정 책제목 찾기
- 2023년 7월 동안 집행된 광고가 사용자에게 노출된 횟수 지역별 조회
- 회원 구매 가격에 따른 등급 구분 조회
- 2022년, 2021년 세대별 양산 판매수 조회
결과물
- HTML/CSS, Javascript를 사용한 웹페이지 개발 교육 웹드라마 원고 집필 & 미니 프로젝트 구현 + 해설 작성
문제 상황
- 3부작 드라마 원고와 해당 에피소드 별 웹 페이지 기능 제작
해결
- 문제 상황에 필요한 쇼핑몰 프로젝트 제작
제작한 문제 상황 (프로젝트)
- 500개 데이터 객체를 이용해 상품 판매 사이트 메인 페이지 제작
- 상품 이미지 캐러셀 제작
- localstorage를 사용해 장바구니에 상품이 담기도록 제작
결과물
(주)헤르스
팀원 | 개발
2021.01. ~ 2021.07. (7개월)
챗봇 서비스 기획 및 시나리오 작성
산업안전보건 지식을 현장근무자와 관리자에게 어떤 서비스로 제공할 것인지 기획
서비스 기획에 맞게 FE 개발 기여
문제상황
- 공공 법률 데이터를 이용해 무엇을 어떻게 UI로 보여주어야 좋을지
해결
API 응답 구조를 파악 → 법률 내용을 3단계 depth 로 나눌 것을 제안
3단 설렉트 박스를 사용하여 상위 법률 선택 후 자연스럽게 하위 법률 선택 할 수 있도록함.
법률조항 번호 입력값 범위, 길이 등 예외사항 제한 추가
프로젝트
킬로미터 :: 당신의 문화생활 길잡이
사이드 프로젝트
2022.07. ~ 2023.03.
킬로미터 :: 당신의 문화생활 길잡이
링크
- 사이트: https://kilometer.shop/ (운영종료)
- github: https://github.com/truthone/km-front
기간/인원/기술스택
- 2022.07 ~ 2023.03
- FE 3명+BE 3명+기획자 1명+디자이너 1명
- React.js, TypeScript, Styled-Components,Emotion, Recoil
소개
- 로그인 / 회원가입
- 문화생활 정보 제공 웹 사이트
- 문화생활 리뷰, 유저들이 다녀온 근처 맛집/카페 정보 공유
기능
- 문화생활 정보 제공
- 문화생활 정보 조건별 검색
- 리뷰 조회 / 저장 / 수정
- 문화생활 관심목록 저장
본인 기여부분
이미지 캐러셀 모듈 구현
- CSS 속성 snap-scroll을 사용하여 터치 UX 개선
- IntersectionObserver API 사용하여 → 숫자 인디케이터 구현
- 여러 페이지에서 다양한 크기 캐러셀 요구 파악 → 모듈화
마우스 드래그 스크롤 구현
- 앱에서 웹으로 기획 변경하여 가로 스크롤 캐러셀의 UX 개선 필요 → 마우스 드래그 이벤트 구현
- mousedown, mouseup 등 기본 마우스 이벤트와 useRef등을 활용하여 개발
- 스크롤링 속도 조정, snap-scroll-type css를 통해 UX 개선
QA 테스트 케이스 작성 및 문제 원인 추적
- 액션 → 기대 결과 / 실제 결과를 상세하게 체크리스 작성
→ 3개 이상의 문제 발견 및 해결 기여
- 액션 → 기대 결과 / 실제 결과를 상세하게 체크리스 작성
타이머로 구현한 이미지 캐러셀 자동 슬라이딩 멈춤 현상 개선
- setTimeout함수를 등록&해제 반복하여 애니메이션 구현 requestAnimationFrame 으로 대체.
- Intersection Observer API를 이용하여 뷰포트 안에 캐러셀 유무를 통해 동작 실행/멈춤 구현
→ 불필요한 동작 제어.
페이지 마크업, 데이터 패칭, 기능 구현
- (1) 마이페이이지
- (2) 마이아카이브 리스트
- (3) 리뷰 상세 정보
- (4) 실시간아카이브 코너 페이지
- 제플린 또는 피그마 디자인을 보고 화면 구현.
배운점
- 구현하는 과정에서 디자이너와 기획자와 소통하며 기획 의도 파악 및 개선 건의
→ 기획, 디자인 의도를 정확히 파악하여 소통하는 것이 중요하다 느꼈습니다. - 작고 사소해보이는 케이스도 상세히 작성해 이슈를 발견&해결
→ 문제를 작은 단위로 쪼개고 사소한 것도 넘어가지 않는 것과 문서화 하는 것이 중요하다고 느꼈습니다.
포트폴리오
URL
교육
동국대학교
대학교(학사) | 멀티미디어공학
2013.03. ~ 2020.02. | 졸업
자격증
정보처리기사
기사 | 한국산업인력공단
2018.05.
자기소개
프론트엔드 직군으로 커리어를 시작하고 싶은 이유
[기술을 통한 문제 해결에서 얻은 보람]
작년 코딩 교육 컨텐츠 기획 및 개발 인턴으로 근무하며, HTML, CSS, JS를 사용해 작업 프로세스와 속도를 혁신적으로 개선한 경험이 있습니다.
협업 도구인 노션에서 작성한 콘텐츠를 회사 CMS에 업로드하는 작업이었는데, 문제 형식에 이미지를 포함시키면서 작업의 복잡도가 증가했습니다. 특히, HTML에 익숙하지 않은 파트타이머가 작업을 맡아 진행 속도가 크게 저하된 상황이었습니다.
이 문제를 해결하기 위해 노션 HTML의 구조와 CMS 입력 필드의 변환 방식을 분석했습니다. 그 결과, 원하는 형태로 HTML을 입력하기 위해서는 몇 가지 태그만 사용하면 된다는 것을 발견했습니다. 이를 기반으로, 이미지 URL과 텍스트를 쉽게 HTML로 변환해 클립보드에 복사할 수 있는 웹 페이지를 개발했습니다. 사용자 경험을 더욱 향상시키기 위해 초기화 버튼과 미리보기 창 같은 기능도 추가했습니다.
이 결과물을 통해, 복잡한 코드 수정 과정 없이 작업 속도를 대폭 개선하고 휴먼 에러를 줄이며, 인지 자원을 절약할 수 있었습니다. 비록 프로젝트의 규모는 크지 않았지만, 실제로 문제를 개선하고 사용자로부터 긍정적인 피드백을 받으며 큰 만족감을 느꼈습니다. 이 경험을 통해 개발을 통한 문제 해결 과정, UI/UX 개선을 통해 사용자 편의성을 고려하는 작업에 큰 흥미와 보람을 느끼면서 프론트엔드 개발자로서 문제 해결에 기여하고자 하는 열정이 더욱 커지는 계기가 되었습니다.
나의 강점
다양한 아르바이트, 동아리 활동, 그리고 인턴 경험을 통해 쌓아온 적응력과 친화성이 저의 강점이라 생각합니다.
이러한 경험들은 저를 유연하게 만들었고, 다양한 배경을 가진 팀원들과 효과적으로 협업할 수 있는 능력을 키웠습니다. 특히, 팀 프로젝트나 협업이 중요한 이 직무에서, 제가 가진 강한 커뮤니케이션 능력과 팀워크는 프로젝트의 성공을 위한 핵심 요소가 될 것입니다.
또한, 코딩 교육 컨텐츠 기획 및 개발 인턴으로 근무하며, 정확한 지식 전달의 중요성을 깨달았습니다. 이 경험을 통해, 저는 자료를 꼼꼼하게 검수하고 논리적으로 사고하는 습관을 기르게 되었습니다. 이러한 능력은 개발 과정에서 발생할 수 있는 다양한 문제를 해결하고, 효율적이고 실용적인 솔루션을 제공하는 데 크게 기여할 것입니다.