프로젝트 소개

직접 소비 기한을 확인할 수 있고 사용자 위치 기반으로 매장 서비스를 제공하는 지능형 온라인 편의점 사이트
신세계아이앤씨의 AI플랫폼을 활용한 (리테일) 서비스 개발 과정 4기 - 최종 프로젝트

2024.03~2024.04 (6주)

• Github

• Notion

역할

• UI/UX & 프론트엔드 리더

• 디자인 소스 제작

• 프론트엔드 중심의 풀스택 개발자

• 모바일 반응형 개발 리드

기술 스택

FE

• React

• React-Router

• Tailwind CSS

• HTML/CSS3/JavaScript(ES6)

• Axios

BE / DB

• Java17

• Spring Boot

• REST API

• MySQL

• MyBatis

• Maven

• Apache Tomcat

TOOLS

• Figma

• Adobe Photoshop, Illustrator

• STS4, Eclipse, MySQL Workbench

구현 기능 & 작업

1. 구현기능

1-1. 네비게이션 바

• 로고 클릭 시, 홈 페이지 이동

• 서비스의 주요 기능 메뉴

  • 소개, 상품, 매장찾기, 택배 예약, 픽업 예약, 이벤트, 고객센터

  • 로그인/로그아웃, 장바구니

1-2. 메인 홈페이지

• 구매한 제품의 소비 기한을 확인하는 Pick Box

  • 구매한 제품 중 소비기한 짧은 순으로 정렬하여 구매자에게 알려줌

• 가까운 Pick ME 매장

  • 사용자 위치 기반, 현재 위치에서 가장 가까운 매장의 정보 보기

• 이벤트 slider

  • 현재 진행중인 행사를 볼 수 있는 이벤트 슬라이더

  • 이벤트 이미지 클릭 시, 해당 이벤트로 이동

• 이달의 행사 상품 slider

  • 1+1, 2+1, HOT(인기) 제품의 카테고리 별로 제품 슬라이더 제공

  • 제품 클릭시 제품 상세 페이지로 이동

• 상품 카테고리

  • 상품 카테고리별 SVG 아이콘에 커서가 닿을 시 애니메이션 진행됨.
    아이콘 클릭 시, 해당 상품 카테고리 페이지로 이동

1-3. 네이버 지도 API 기반 매장 찾기

• 지역 검색(시/도 검색) & 매장명 검색

  • "도/구"를 검색 시, 검색어를 반영한 결과값 목록이 dropdown에서 전시 및 option 선택

• 매장 카테고리 선택

  • 선택한 매장 카테고리에 따라 검색한 매장 결과 목록에서 재선별함

• 매장 목록

  • 검색 조건에 충족하는 매장 목록 반환

  • 개별 매장 정보 전시 - 매장 주소, 연락처, 운영 시간, 해당하는 매장 카테고리

  • 개별 매장의 "매장 재고 보러기" 링크 클릭 시,
    제품 구매 가능한 매장 재고 현황 페이지로 이동

• 사용자 위치 기반 지도 위 매장 마커

  • 사용자 위치 기반 지도 영역 내, 매장 마커 제공

  • 매장 마커 클릭 시, 마커 중심으로 지도 이동(panTo) 및 매장 정보 창 제공

1-4. 서비스 소개 페이지

• 팀원 인사 및 소개글

  • 팀원들의 아이콘 배치와 말풍선 모양으로 텍스트 배치함

2. 기획 & 디자인 작업

2-1. 서비스 UI/UX 기획 작업 총괄

• Figma를 활용한 UI/UX 기획/디자인 작업 총괄

  • User-flow차트, DB 관계도, 와이어 프레임 등의 Figma를 활용한 UI/UX 기획 작업 총괄

2-2. 디자인 소스 제작

A. 로고 제작

• Pick Me 서비스 로고 기획 및 제작

• 축약형 로고(favicon, 모바일 바로가기 용) 기획 및 제작

B. 아이콘 제작

• 상품 카테고리별 음식 SVG 아이콘 기획 및 제작

• Beez 팀원별 꿀벌 픽셀 아트(Pixel-art) 아이콘 기획 및 제작

  • 비(Bee)전공자 팀 Beez라는 팀 명칭에 착안,
    멤버들의 특징을 담은 꿀벌 픽셀 아트(Pixel-art) 스타일로 기획 및 제작

2-3. FE 폴더 아키텍쳐 & 컨벤션 정립

• FE 폴더 아키텍쳐로서 FSD 아키텍쳐를 도입

• 커밋 메세지 컨벤션, 코드 컨벤션 정립

2-4. Issue 기반 Git 협업 리드

• GitPractice 저장소를 만들어 Git 협업 연습을 리드함

  • 커스텀 Issue 템플릿을 통한 Issue 발행

  • Issue 기반 브랜치 전략, PR 전략

프로젝트 소개

대학생의 자유로운 소통을 돕는 대학생 커뮤니티 웹 서비스

신세계아이앤씨의 AI플랫폼을 활용한 (리테일) 서비스 개발 과정 4기 - 중간 프로젝트

2024.02~2024.02 (2주)

• Github

역할

• UI/UX & 프론트엔드 리더

• 디자인 소스 제작

• 프론트엔드 중심의 풀스택 개발자

기술 스택

FE

• JSP

• Bootstrap

• HTML/CSS3/JavaScript(ES6)

• Ajax

• jQuery

BE / DB

• Java17

• Spring

• REST API

• MySQL

• MyBatis

• Maven

• Apache Tomcat

TOOLS

• Figma

• Adobe Photoshop, Illustrator

• STS4, Eclipse, MySQL Workbench

구현 기능 & 작업

1. 구현 기능

1-1. 네비게이션 바

• 라이트 / 다크 모드 토글 스위치

  • Javascript의 toggle() 메소드를 활용하여 body의 Classlist 조작을 통해 style 조작

• 하위 dropdown 메뉴

  • 게시판, 학교생활, 마이페이지

1-2. 홈 페이지

A. 프로필 탭

• 사용자 프로필

  • 로그인하지 않았을 시, 로그인 요구

  • 로그인 후, 프로필 사진, 닉네임, 아이디, 자기소개 제공

  • 프로필 수정 버튼(프로필 수정 페이지로 이동), 프로필 공유 버튼(추후 개발 예정)

• 사용자 위치 기반 날씨 및 기온

  • OpenWeatherMap의 Weather API 활용

• 자유 게시판 검색창

• 오늘의 학교 생활

  • 사용자 접속 시각(요일)에 따라 해당 일자 대학 시간표 제공

B. 메인 탭

• 메이트 구하기

  • 어떤 활동을 같이 할 동료를 구하는 게시판의 최근 글 4개를 선정하여 게시

• 자유 게시판

  • 자유롭게 소통하는 게시판의 최근 글 5개를 선정하여 게시

• 오늘의 동아리

  • 동아리 홍보 게시판(개발 예정)에서 최근 동아리 홍보 게시물을 2개 선정 하여 thumbnail로 게시

오늘의 중고거래

• 중고거래 게시판의 최근 글을 3개 선정하여 게시

2. 작업

2-1. 디자인 시스템 정립

• CSS 변수를 활용한 디자인 시스템을 도입

• BEM 도입

2-2. 디자인 소스 제작

A. 로고 제작

• 서비스 로고 기획 및 제작

• 축약형 로고(favicon, 모바일 바로가기 용) 기획 및 제작

2-3. 서비스 UI/UX 기획 작업 총괄

• Figma를 활용한 UI/UX 기획/디자인 작업 총괄

  • Useflow차트, DB 관계도, 와이어프레임 등의 Figma를 활용한 UI/UX 기획 작업 총괄

프로젝트 소개

주식 그래프와 To-do (할 일 관리) 서비스를 결합한 웹 서비스

2023.08~2023.08 (3주)

역할

• 프론트엔드 개발자

• 디자이너

• UI/UX 기획 작업 주도

스택

FE

• HTML5/CSS3/JavaScript(ES5)

• AOS (scroll-based animation library)

TOOLS

• Figma

• Adobe Photoshop, Illustrator

구현 기능 & 작업

1. 디자인

1-1. 서비스 UI/UX 기획 작업 리드

• Figma를 활용한 UI/UX 기획/디자인 작업 총괄

  • Userflow차트, 와이어프레임 등의 Figma를 활용한 기획 작업 총괄

1-2. 뱃지 시스템 디자인 및 제작

• 뱃지 시스템 디자인 및 제작

  • 사용자가 달성한 다양한 종류의 성취에 제공하는 뱃지의 디자인 시스템 기획 및 소스 제작

    
    ex. 사용자가 이틀 연속 할 일을 완료한 경우, combo 뱃지

2. 구현 기능

2-1. 서비스 소개 페이지

• 스크롤 기반 컴포넌트 애니메이션 도입

  • AOS 라이브러리 활용하여 스크롤 기반의 애니메이션을 신속히 구현함

프로젝트 소개

NextJS 14 기반 넷플릭스 클론 코딩

2024.07~2024.07 (1주)

스택

FE

• NextJS 14

• React

• Typescript

• Styled-Components

• Framer

구현 기능 & 작업

1. 홈 화면

• CSS Grid 반응형 레이아웃에 인기 영화 목록을 비동기 처리

• 영화 포스터 :hover시 framer를 통한 dim overlay 효과

2. 영화 상세 화면

• 영화 id별로 동적 라우팅 처리

• 영화 상세 정보(포스터 이미지, 영화명, 별점, 상세설명, 홈페이지, 예고편 영상 목록 포함) 데이터 비동기 처리

• React Suspense 컴포넌트를 통해 로딩 처리

3. 서비스 소개 화면

• 동적 메타 데이터 처리로 현재 어느 페이지에 있는지 위치를 표시하는 네비게이션 바를 통해 페이지 이동이 가능함

프로젝트 소개

NextJS 14 기반 뉴욕타임즈 베스트셀러 소개 서비스

2024.07~2024.07 (2일)

스택

FE

• NextJS 14

• React

• Typescript

• Styled-Components

구현 기능 & 작업

1. 홈 화면

• CSS Grid로 만든 레이아웃에 도서 장르별 목록 전시

2. 영화 상세 화면

• 도서 장르 id별로 동적 라우팅 처리

• 도서 컴포넌트(도서 표지 이미지, 도서명, 작가명, 아마존 구매 링크 포함) 목록 데이터 비동기 처리

3. 서비스 소개 화면

• 동적 메타 데이터 처리로 현재 어느 페이지에 있는지 위치를 표시하는 네비게이션 바를 통해 페이지 이동이 가능함

프로젝트 소개

React 기반 디즈니 캐릭터 소개 서비스

2024.08~2024.08 (1주)

스택

FE

• React

• React-Query

• Typescript

• Styled-Components

구현 기능 & 작업

1. 홈 화면

• CSS Grid으로 만든 반응형 레이아웃에 모든 디즈니 캐릭터를 열거함

• Styled-Component로 하위 컴포넌트 스타일 관리

2. 캐릭터 상세 화면

• 캐릭터 id별로 동적 라우팅 처리

• 캐릭터 상세 정보 - 프로필 사진, 이름, 출연작, Fandom Wiki 링크를 보여줌

• Loading 컴포넌트로 로딩 처리

• Styled-Component로 하위 컴포넌트 스타일 관리

프로젝트 소개

온라인으로 2주동안 총 13개의 CSS Layout 웹디자인&퍼블리싱 과제를 완료하는 챌린지 과정

2024.08~2024.08 (2주)

스택

FE

• CSS Flex

• CSS Grid

• SCSS

작업

1. 디자인 & 퍼블리싱

1-1. 포스터 클론 코딩

• CSS Flex를 활용하여 그래픽 디자인 포스터를 클론 코딩

1-2. 웹사이트 클론 코딩

• CSS Grid, SCSS를 활용하여 주어진 웹사이트의 레이아웃 클론 코딩 (디자인 자유)

소개

온라인 프로그래밍 학습 사이트 "노마드코더"에서 주최하는 10주 리액트 스터디

React, Typescript, TailwindCSS, NextJS를 학습하며 총 5개의 강의 완강 및 4개의 최종 과제를 제출하고 통과해야 하는 온라인 스터디

2024.06~2023.08 (10주)

활동

1. 학습 스택 & 강의

1-1. 학습 스택

• ReactJS

• React-Query

• Typescript

• CSS Module

• Styled-Component

• TailwindCSS

• Framer

• Recoil

• NextJS 14

1-2. 강의

• ReactJS로 영화 웹 서비스 만들기

• 타입스크립트로 블록체인 만들기

• React JS 마스터 클래스

• NextJS 시작하기

• [풀스택] 캐럿마켓 클론코딩

2. 최종 필수 과제

2-1. React 기반 디즈니 캐릭터 앱

• 디즈니 캐릭터 API를 활용하여 캐릭터 정보 살펴보는 서비스

2-2. Next14 기반 넷플릭스 클론 코딩

• 영화 API 기반의 영화 평점과 줄거리, 예고 등을 보여주는 서비스 클론 코딩

2-3. Next14 기반 뉴욕타임즈 베스트셀러 코딩

• 뉴욕타임즈 베스트셀러를 장르별로 확인하는 서비스

2-4. Next14 기반 트위터 클론 코딩

• 로그인, 게시물 CRUD, 좋아요, 검색이 가능한 트위터 클론 코딩

3. 주간 회의

• 매주 목요일 오후 8시~오후 9시까지 약 1시간 동안의 온라인 주간 회의를 진행함

• 우수 과제 선정 및 발표회 또는 소감회 진행

4. 주간 회고록

• 매주 할 일, 마친 일, 소감, 배웠던 것들을 복기하면서 작성함

소개

온라인 CSS 심화 학습 챌린지에 참여하여 총 13개의 과제를 제출하며 웹 디자인/퍼블리싱을 집중 훈련하였습니다.

2024.08~2024.08 (2주)

활동

1. 학습 스택 & 강의

1-1. 학습 스택

• CSS Flex

• CSS Grid

• SCSS

1-2. 강의

• CSS Layout 마스터클래스

2. 과제

• CSS Flex를 활용한 포스터 클론 코딩

• CSS Grid, SCSS를 활용한 웹사이트 클론 코딩

소개

서울 기반 전국 대학 연합 웹 프로그래밍 동아리

Html5/CSS3/Javascript, Python, Django를 활용한 웹 프로그래밍 기초를 교육을 받음

약 3주간의 팀 프로젝트 진행

역할

• 유일한 지방 참여생

• TaskStock의 UI/UX 기획 리더, 디자이너, 프론트엔드 개발자

활동

1. 유일한 지방 참여생

1-1. 서울 대면 세션 참여

• 매주 주말 서울에서 열리는 대면 세션에 90%(코로나 19로 인한 병결 제외) 출석함

1-2. 온라인 교육 세션 참여

• 주중 화, 목 온라인 교육 세션으로 웹 프로그래밍 기초를 약 총 64시간 학습함

1-3. 개인 및 팀 과제

• 개인 과제 8개, 팀 과제 3개에 참여 개발을 통해 프론트엔드 개발과 Git을 통한 분산 버전 관리를 실습함

2. "TaskStock" 팀 프로젝트

2-1. UI/UX 기획 작업 리더

• Figma를 활용한 UI/UX 기획/디자인 작업 리드

2-2. 디자이너

• 서비스 목표와 맞는 뱃지를 디자인 및 소스 제작

2-1. 프론트엔드 개발자

• AOS 라이브러리를 활용한 서비스 소개 페이지 개발

소개

교내 전공 학과 영어 회화 동아리

매주 수요일(시험 기간 제외) 2시간, 위원회가 선정한 원문 기사 2편를 읽고 자체 제작한 활동 질문지를 활용하여 자유로운 영어 회화 및 토론 활동을 진행함.

역할

• 1기 초대 회장(2023.03~2023.06)

• 위원회 위원(2022.08~2023.06)

활동

1. 동아리 1기 회장

1-1. 동아리 홍보 담당 및 총괄

• 홍보 포스터 제작,

  홍보 게시물 작성

• 문의글 답변

1-2. 위원회 회의 주관

• 의제 채택 및 발의

• 과사무실에 회의 결과를 전달 및 소통

2. 영어 회화 준비 및 주관

2-1. 회화 활동 준비

• 회화 활동 준비

  • 원문 기사 2편 선정

  • 원문 기사와 관련된 회화 질문 제작

2-2. 영어 회화 도우미

• 영어 회화 조 활동을 리드하며 조원 개별적으로 회화 도움 지원

  • 팀의 리더로서 총 2팀의 랜덤한 멤버 구성의 팀 회화 활동을 리드함

  • 조마다 다른 조원 구성에 따라 아이스 브레이킹 활동 진행

  • 발화자에 따라 회화 난이도 조정 및 도움 제공