증명사진
홍신원

Frontend Developer

SKILL
html5css3javascriptreactnexttypescriptdartfluttergitgithubIcon

Q. 일에 있어 가장 중요하게 생각하고 있는 것

업무 중 발생하는 다양한 문제 상황에 대해 적극적으로 의견을 제시하고
협의를 통해 최선의 해결책을 도출하는 것을 중요하게 생각합니다.
또한, 논의된 내용을 문서화하여 문제 발생의 원인을 명확히 이해하고,
이를 기반으로 더 나은 개선 방안을 제시할 수 있도록
노력하는 것이 중요하다 생각합니다.

ONOOFF

하이퍼로컬 SNS - 내 근처 팝업,핫플,맛집,번개 모임 친구찾기 APP

더 그래픽 노블스 - 서비스 기획 및 UI/UX 개선, 프론트개발 · 작업자 3명

2022.04 ~ 2025.02

dart
flutter
React.js
next.js
TypeScript
Tailwind CSS
firebase
Illustrator
Figma
ONOOFF 썸네일

react.js 2회, next.js, flutter로 총 4회의 경험에 걸쳐 앱을 만들었고 최종적으로 flutter로 앱이 출시되었습니다. 그 과정 속에서 계속 소통을 통해서 앱의 발전을 하기 위한 아이디어를 창출하고 고객들이 더 편히 사용할 수 있도록 UI/UX 개선에 대한 기획과 제작, 그리고 앱 전반의 모든 프로세스를 문서화하여 기록하는 업무를 주도하였습니다.

📍 주요 기능 및 특징

  • 회원가입(+SNS) 및 로그인, 로그아웃, 정보수정, 탈퇴
  • 피드 CRUD + 피드 데이터 무한 스크롤링 + 피드 검색
  • 핀(이벤트) CRUD + 핀(이벤트) 검색 + 지도이동으로 핀(이벤트) 출력 + 핀(이벤트) 참여자 관리
  • 포토카드 만들기 + 대화하기 + 약속잡기
  • 채팅 + 채팅 자동 삭제
  • 마이페이지 피드, 이벤트 공개범위 + 유저평가/매너점수 + 팔로우/팔로잉

💻 작업 화면

민턴인 리뉴얼 기획서 썸네일 1
민턴인 리뉴얼 기획서 썸네일 2
민턴인 리뉴얼 기획서 썸네일 3
민턴인 리뉴얼 기획서 썸네일 4
민턴인 리뉴얼 기획서 썸네일 5
민턴인 리뉴얼 기획서 썸네일 6
민턴인 리뉴얼 기획서 썸네일 7
민턴인 리뉴얼 기획서 썸네일 8
민턴인 리뉴얼 기획서 썸네일 9
민턴인 리뉴얼 기획서 썸네일 10
민턴인 리뉴얼 기획서 썸네일 11
민턴인 리뉴얼 기획서 썸네일 12
민턴인 리뉴얼 기획서 썸네일 13
민턴인 리뉴얼 기획서 썸네일 14
민턴인 리뉴얼 기획서 썸네일 15
민턴인 리뉴얼 기획서 썸네일 16
민턴인 리뉴얼 기획서 썸네일 17
민턴인 리뉴얼 기획서 썸네일 18
민턴인 리뉴얼 기획서 썸네일 19
민턴인 리뉴얼 기획서 썸네일 20
민턴인 리뉴얼 기획서 썸네일 21
민턴인 리뉴얼 기획서 썸네일 22
민턴인 리뉴얼 기획서 썸네일 23
민턴인 리뉴얼 기획서 썸네일 24
민턴인 리뉴얼 기획서 썸네일 25
민턴인 리뉴얼 기획서 썸네일 26
민턴인 리뉴얼 기획서 썸네일 27
민턴인 리뉴얼 기획서 썸네일 28
민턴인 리뉴얼 기획서 썸네일 29
민턴인 리뉴얼 기획서 썸네일 30
민턴인 리뉴얼 기획서 썸네일 31
민턴인 리뉴얼 기획서 썸네일 32
민턴인 리뉴얼 기획서 썸네일 33
민턴인 리뉴얼 기획서 썸네일 34
민턴인 리뉴얼 기획서 썸네일 35
민턴인 리뉴얼 기획서 썸네일 36
민턴인 리뉴얼 기획서 썸네일 37
민턴인 리뉴얼 기획서 썸네일 38
민턴인 리뉴얼 기획서 썸네일 39
민턴인 리뉴얼 기획서 썸네일 40
민턴인 리뉴얼 기획서 썸네일 41
민턴인 리뉴얼 기획서 썸네일 42
민턴인 리뉴얼 기획서 썸네일 43
민턴인 리뉴얼 기획서 썸네일 44
민턴인 리뉴얼 기획서 썸네일 45
민턴인 리뉴얼 기획서 썸네일 46
민턴인 리뉴얼 기획서 썸네일 47
민턴인 리뉴얼 기획서 썸네일 48
민턴인 리뉴얼 기획서 썸네일 49
민턴인 리뉴얼 기획서 썸네일 50
민턴인 리뉴얼 기획서 썸네일 51
민턴인 리뉴얼 기획서 썸네일 52
민턴인 리뉴얼 기획서 썸네일 53
민턴인 리뉴얼 기획서 썸네일 54
민턴인 리뉴얼 기획서 썸네일 55
민턴인 리뉴얼 기획서 썸네일 56
민턴인 리뉴얼 기획서 썸네일 57
민턴인 리뉴얼 기획서 썸네일 58
민턴인 리뉴얼 기획서 썸네일 59
민턴인 리뉴얼 기획서 썸네일 60
민턴인 리뉴얼 기획서 썸네일 61
민턴인 리뉴얼 기획서 썸네일 62
민턴인 리뉴얼 기획서 썸네일 63
민턴인 리뉴얼 기획서 썸네일 64
민턴인 리뉴얼 기획서 썸네일 65

✨ 작업 기여도

초기 프로젝트 서류 정리 및 기획 구성, 아이디어 도출

  • 초기 디자인 시안으로 공통 컴포넌트 정리 및 로드맵 문서화
  • 기획자, 디자이너, 프론트엔드 개발자와 소통하며 프로젝트 방향성을 구체화
  • 요구사항을 시각화 해 같이 전달하면서 요구사항을 명확하게 전달하고, 주기적인 회의를 통해 개선해 나감

공통 컴포넌트 정리 및 작업

  • 디자인 시안을 보며 공통 컴포넌트 리스트를 만들고 그를 기반해 컴포넌트 제작
  • 작업하면서 발생되는 UI 문제를 디자이너와 기획자에게 알리고 개선 레퍼런스 제시 및 수정시안으로 수정

피드 CRUD 작업

  • 피드 정보 조회, 수정, 삭제, 업로드 기능 구현
  • 피드 이미지 수정 및 이동, 비율 기능 작업
  • 디바이스에 바로 적용되어 조회할 수 있도록 기능 구현

핀(이벤트) 수정, 삭제, 이벤트 참여 작업

  • 피드 정보 조회, 수정, 업로드 기능 구현
  • 피드 이미지 수정 및 이동, 비율 기능 작업
  • Library를 사용하여 이벤트 시작 날짜 및 종료 날짜, 정보 조회, 수정 기능 구현
  • 디바이스에 바로 적용되어 조회할 수 있도록 기능 구현

좋아요, 덧글 CRUD 작업

  • 좋아요 리스트 정보 조회 및 수정
  • 덧글/더덧글 정보 조회, 수정, 삭제, 업로드 기능 구현
  • 디바이스에 바로 적용되어 조회할 수 있도록 기능 구현

MY 페이지 데이터 출력 작업

  • MY 정보 조회, 수정, 업로드 기능 구현
  • 프로필 사진 업로드 및 수정 기능 작업
  • 피드/핀(이벤트) 수정 및 삭제 시 디바이스에 바로 적용되어 조회할 수 있도록 기능 구현

테스트/개선 의견 및 아이디어

  • 테스트를 진행하며 발생되는 오류를 찾아내어 코드 개선 또는 더 나은 기능으로 개선방안 제안
  • 개선 사항 등 피드백을 받았을 때 열린 마음으로 수용하고, 더 나은 방향으로 제안하여 프로젝트를 구체화해 나감
  • 요구사항 등을 정확히 파악하고 이해하기 위해 직접 소통하며 일정과 요구사항을 체크