채용공고 올리기

전서희님을 응원해보세요!

INFCON 참여
지금 만족하고 있어요

미리보기

기본 정보

이름
전서희
직업
프론트엔드 개발자
간단 소개

사용자의 반응에 따라 동적인 서비스를 제공하는 개발에 큰 매력을 느껴 프론트엔드 개발자로 성장하고 있습니다. 기획, 디자인, 개발의 전 과정에 걸친 경험을 통해 향상된 의사소통 능력을 갖추고 있으며, 팀원들과 협력하여 효율적인 해결책을 찾는 것을 즐깁니다. 꾸준한 성장과 발전을 위해 Next.js 공식 문서를 스터디하며 새로운 기술을 학습하고 있으며, 이를 실제로 적용하기 위해 개인 블로그를 Next.js로 개발하는 프로젝트를 진행 중입니다.

자기소개

자기소개

Mindset

  • 사용자 중심의 사고를 바탕으로 최적의 사용자 경험을 제공하기 위해 노력합니다.

  • 지속적인 학습과 성장을 통해 최신 기술 트렌드에 적응합니다.

  • 협업과 소통을 중요시하여 팀원들과 원활한 협력을 이룹니다.

Communication

  • 프로젝트의 주요 내용을 체계적으로 기록하여 팀원들과 공유합니다.

Frontend

  • React Hooks를 활용하여 상태 관리 및 생명주기 관리의 효율성을 높입니다.

  • TypeScript를 사용하여 코드의 안전성을 높이고 디버깅을 효율적으로 수행합니다.

  • TanStack Query를 이용하여 데이터 페칭, 캐싱 및 동기화를 효율적으로 처리하며 서버와 클라이언트 상태를 일관되게 유지합니다.

  • Zustand를 이용한 전역 상태 관리를 통해 데이터 흐름을 원활하게 유지합니다.

  • Styled-components를 기반으로 CSS-in-JS 방식으로 반응형 디자인과 조건부 스타일링을 구현합니다.

  • 반응형 웹 디자인을 적용하여 다양한 기기에서 최적의 사용자 경험을 제공합니다.

  • Git을 통해 버전 관리를 수행하고 팀원들과의 협업을 지원합니다.

경력

회사명

애드펄스

직급 | 부서 | 근무 유형

사원 | UX/UI팀 | 재직 중

근무 기간

2024.06. ~ 재직 중 (8개월)

담당 업무

이커머스 전문 솔루션 업체에서 다양한 쇼핑몰 서비스의 프론트엔드 개발을 담당하며 UI/UX 개선, 성능 최적화, 반응형 웹 구현에 기여했습니다.

디자인 통일성을 제공하고 개발 생산성을 높이기 위해 디자인 시스템을 설계하였고, ESLint와 StyleLint를 주도적으로 도입하여 코드 컨벤션을 설정하고 가독성을 향상시켰습니다.

필요한 기능이 있을 경우 기획 및 디자인 단계에도 참여하여 더 나은 가치를 전달하는 데 기여하였으며, 작업 내역과 진행 과정을 문서화하여 팀의 협업 효율을 높였습니다.

회사명

알로카도스

직급 | 부서 | 근무 유형

인턴 | 개발팀

근무 기간

2022.11. ~ 2023.04. (6개월)

담당 업무

사내 협업툴 GracyFrontend 개발을 담당하며, React와 TypeScript를 활용해 유지보수와 기능 구현을 진행했습니다. Gracy 소개 페이지와 Gracy 서비스 페이지를 반응형으로 구현하였고, Zustand로 상태관리를 최적화하여 sidebar 조건부 렌더링을 개선했습니다. 입력 검증 시스템을 리팩토링해 코드 재사용성을 높이고 오류 처리 로직을 통합하여 사용자 경험을 개선했습니다.
또한, 디자이너 및 백엔드 개발자와의 협업을 통해 사용자 요구 사항을 효과적으로 반영하며 팀의 개발 프로세스를 이해하고 원활한 소통을 경험했습니다.

프로젝트

프로젝트명

AutoPlace, 공간 대여 서비스를 자동화해서 운영할 수 있는 서비스

소속/기관명

사이드 프로젝트

프로젝트 기간

2024.12. ~ 진행 중

프로젝트 내용

AutoPlace는 파티룸과 같은 공간 대여 서비스를 자동화하여 효율적으로 운영할 수 있도록 돕는 서비스입니다. IoT 기기와 연동하여 난방, 에어컨, 도어락 등을 웹으로 제어할 수 있으며, 인원 추가 및 노래방 결제까지 비대면으로 처리할 수 있는 기능을 제공합니다.

상세 역할

  • 기기 제어 페이지 및 각 기기별 제어 상세 페이지 리팩토링, 추가 기능 구현 및 변경된 UI 적용

[ SSR 도입 및 초기 로딩 최적화]

  • 문제 정의

    • 기존 코드가 Next.js와 TypeScript로 작성되었으나, 모든 페이지가 클라이언트사이드 렌더링(CSR)방식으로 구현되어 성능 저하 및 초기 로딩속도 지연 발생

    • 하나의 useEffect에 여러 로직이 처리되어 코드 가독성과 유지보수성 저하

    • API 호출 로직이 분리되지 않고 호출하는 곳에서 직접 작성되어 재사용성 부족

    • localStorage와 Zustand의 중복 상태 관리로 인한 상태 동기화 문제 발생 및 불필요한 렌더링

  • 주도적 해결

    • 서버사이드 렌더링(SSR) 도입: SSR이 필요한 데이터는 서버에서 사전 렌더링하고, 상호작용이 필요한 데이터는 CSR으로 처리하여 성능을 최적화. 이를 통해 초기 로딩 속도를 개선하면서 동적 데이터 처리도 유연하게 대응

    • API 호출 로직 분리 및 데이터 처리 최적화: API 호출 로직을 분리하고, CSR로 불러오는 데이터는 Tanstack Query를 사용하여 관리

    • Zustand의 Persist 상태 관리 적용: 상태 관리 일관성을 유지하고, 중복된 상태 관리를 줄여 코드 복잡도 감소

  • 핵심 성과

    • 초기 로딩 속도 개선: SSR 도입으로 초기 로딩 시간을 단축시켰으며, FCP는 33%, LCP는 약 4% 개선

    • 코드 구조 개선: 복잡했던 useEffect와 API 호출 로직을 서버 측으로 분리하고 클라이언트에서의 로직을 단순화하여 코드 가독성과 유지보수성 향상

    • 상태 관리 최적화: Zustand Persist를 적용하여 상태 동기화 문제를 해결하고, 중복 상태 관리로 인한 불필요한 렌더링을 줄여 성능을 개선

링크 포텐데이 프로젝트

프로젝트명

Edutube, 강의 및 커피챗 오픈마켓 서비스

소속/기관명

멋쟁이 사자처럼 프론트엔드 스쿨 플러스

프로젝트 기간

2023.11. ~ 2023.12.

프로젝트 내용

에듀튜브는 교육 관련 영상을 카테고리별로 묶어 쉽게 시청할 수 있도록 서비스를 제공하고 커피챗을 통해 사용자들이 지식 공유를 할 수 있도록 도움을 주는 플랫폼입니다.

진행 과정
상세 역할
  • 커피챗 게시물 CRUD, 예약 및 장바구니 기능, 후기 입력 및 전체 요약 보기 기능 개발, TailwindCSS 설정 및 전체적인 기획 및 디자인 업무 담당 (FE 3명)

[초기 로딩 속도 최적화]

  • 문제 정의:

    • 초기 페이지 로딩 속도가 지연되어 사용자 경험이 저하됨

    • 구글 라이트하우스 점수에서 낮은 웹 성능 점수를 기록, 특히 이미지 로딩 속도에서 문제가 발견됨

  • 주도적 해결:

    • 지연 로딩과 무한 스크롤 구현: React Query와 Intersection Observer API를 활용하여 초기 로딩 시 화면에 필요한 데이터만 서버에서 가져오고, 이후 데이터는 사용자의 스크롤에 따라 동적으로 로드되도록 무한 스크롤 기능을 도입

    • 이미지 최적화: 구글 라이트하ac우스를 통해 성능 저하의 원인이 된 이미지 로딩 속도를 개선하기 위해, 배너 이미지의 확장자를 PNG에서 WEBP 형식으로 변경하여 더 빠른 로딩이 가능하도록 최적화

  • 핵심 성과:

    • 초기 로딩 속도 개선: SSR 및 데이터 지연 로딩 전략을 통해 초기 로딩 시간 단축, 사용자 경험향상

    • 웹 성능 점수 10점 상승: 구글 라이트하우스 성능 점수를 10점 이상 향상시켜, 최적화된 웹페이지 제공 및 SEO 개선에 기여

[Atomic 디자인 패턴 도입으로 개발 효율성 개선]

  • 배경:

    • 일관된 사용자 경험을 제공하고, 개발 과정의 생산성을 높이기 위해 Atomic 디자인 패턴 도입의 필요성 인식

  • 주도적 해결:

    • Atomic 디자인 패턴 조사 및 적용: 프로젝트의 규모와 요구사항에 맞춰 atom, block, view 단계로 구성된 디자인 시스템을 직접 설계하고 구현

    • 통합 디자인 및 개발: Figma를 활용하여 atom 컴포넌트를 직접 디자인하고, 이를 기반으로 재사용 가능한 컴포넌트를 구축하여 UI/UX 일관성을 강화하고 개발 효율성을 극대화

  • 개발 생산성 향상: Atomic 디자인 패턴을 직접 설계하고 적용하여 코드 중복을 줄이고, 개발 시간을 단축하여 팀의 생산성 향상에 기여

링크 저장소 링크

프로젝트명

게스 블랙 프라이데이 쿠폰 발급 시스템: 사용자 경험 향상 및 실시간 처리

소속/기관명

애드펄스

프로젝트 기간

2024.11. ~ 진행 중

프로젝트 내용

목표

  • Guess Korea의 블랙프라이데이 이벤트 페이지에서 랜덤 및 정기 쿠폰 다운로드 기능 구현을 통해 사용자 참여를 유도하고, 이벤트 경험을 개선

[게스 블랙 프라이데이 이벤트 랜덤 쿠폰 다운로드 기능 개발]

  • 문제 정의:

    • 블랙 프라이데이 이벤트에서 랜덤 쿠폰 제공 및 시간대별 쿠폰 발급 제어 필요

    • 비효율적인 로딩 구조로 인해 발급 처리 속도 저하 문제 발생

  • 주도적 해결:

    • 효율적인 데이터 확인 유틸리티 구현: 특정 데이터와 DOM 요소의 준비 상태를 주기적으로 확인하는 비동기 반복 검사 로직을 구축하여 이벤트 로직의 안정성과 효율성 확보

    • 오류 상황별 안내 모달 설계: 발급 수량 소진, 중복 발급 등 다양한 오류 상황에 따라 사용자에게 명확한 안내 메시지를 제공하도록 인터페이스 구성

    • 쿠폰 발급 로직 최적화: 데이터 페칭과 사용자 인터랙션 과정을 최적화하여 사용자 요청을 빠르게 처리

  • 핵심 성과:

    • 쿠폰 발급 과정 간소화: 불필요한 중복 요청 방지로 서버 리소스 효율화

    • 유지보수 및 확장성 강화: 재사용 가능한 함수와 구조 설계

    • 오류 상황별로 모달 표시하여 사용자 경험 개선

프로젝트명

오드삭스

소속/기관명

애드펄스

프로젝트 기간

2024.09. ~ 2024.10.

프로젝트 내용

[추천 상품 노출 및 반응형 UI 개선으로 UX 최적화]

문제 정의:

  1. 게시판 추천 상품

    • 고객사의 요청으로 게시판 페이지에 게시물 별 추천 상품 리스트 새롭게 노출

  2. 카테고리 메뉴 구조

    • 게시판 내 카테고리 구조가 단순하여 탐색 효율성이 떨어지고,

      원하는 콘텐츠로의 접근성이 저하됨

주도적 해결:

  1. 게시판 추천 상품 리스트 개선

    • 동적 데이터 로드 및 필터링: 서버에서 추천 상품 데이터를 가져오고, 고객사의 요구에 맞는 상품만 필터링하여 자동으로 갱신되도록 구현

    • lazy-loading 적용: 이미지 로딩 시 loading="lazy" 속성을 추가하여 초기 로딩속도 최적화

  2. 반응형 UI 작업

    • resize 이벤트 처리: 디바운스를 적용하여 화면 크기 변경 시 모바일/데스크탑 환경에 맞게 동적으로 조정

    • 반응형 CSS 클래스 추가: 디바이스별 최적화된 환경을 제공하기 위해 only_mobile 및 only_pc 클래스를 동적으로 적용

  3. 카테고리 메뉴 구조 확장

    • 동적 하위 카테고리 생성: API에서 카테고리 데이터를 가져온 후, 게시판 메뉴에 하위 카테고리를 동적으로 추가

핵심 성과

  1. 프로모션 효과 강화

    • 동적 추천 상품 노출로 상품의 업데이트 효율성이 증대

    • lazy-loading 구현으로 초기 로딩 속도를 단축하고 사용자 경험 향상

  2. 반응형 UI 적용

    • 반응형 UI 적용으로 다양한 디바이스 환경에서도 편리한 탐색 가능

  3. 카테고리 탐색 편의성 증대

    • 하위 카테고리를 자동 생성하고 탐색 경로를 동적으로 설정하여 콘텐츠 접근성을 개선

링크: 오드삭스 페이지

프로젝트명

Gracy, 사내 문화 증진을 위한 협업툴 서비스

소속/기관명

알로카도스

프로젝트 기간

2022.11. ~ 2023.04.

프로젝트 내용

Gracy는 사내 구성원의 업무 효율을 높이고, 사내 문화 및 구성원 간 소통을 강화할 수 있는 다양한 인사관리 기능을 제공하는 서비스입니다.

상세 역할
  • 회사 홈 메인 페이지 레이아웃 및 반응형 작업, 문의하기 기능과 입력 폼 유효성 검사 구현, Zustand로 상태 기반 sidebar 조건부 렌더링, 팀 상세 조회 시 팀 이름을 이용한 쿼리스트링 라우터 변경, 로그인 및 회원가입 입력값 실시간 에러 감지 기능 구현, 사내 팀원 무작위 대화 및 특정 주제 대화 기능 설정 페이지 레이아웃 및 반응형 작업, welcome 페이지 레이아웃 구현

[통합된 오류 처리 시스템 개발 및 사용자 경험 개선]

  • 문제 정의:

    • 폼에서 입력 값이 비어있는 상태로 전송되는 경우에 대한 예외 처리가 되어 있지 않아 사용자 혼란 발생

    • 여러 페이지에서 입력 값의 오류 메시지가 중복된 코드로 관리되어 유지보수가 어려운 상황을 확인

  • 주도적 해결:

    • 필수 입력 값에 대한 예외 처리를 추가하여 사용자 오류를 방지하고, 전송 과정의 신뢰성을 향상

    • 입력 값과 오류 상태를 관리하고 오류 메시지를 일관되게 반환하는 커스텀 훅을 리팩토링하여, 모든 페이지에서 통합된 오류 처리 로직을 적용

  • 핵심 성과:

    • 일관된 오류 처리 시스템 구축으로, 에러 메시지 수정 시 개발 생산성 향상

    • 사용자 입력 오류 감소로 사용자 경험이 개선되고, 입력받은 데이터 관리 편의성 증가

링크 Gracy 페이지

프로젝트명

금방내방, 인테리어 SNS 서비스

소속/기관명

멋쟁이 사자처럼 프론트엔드 스쿨

프로젝트 기간

2022.07. ~ 2022.08.

프로젝트 내용

금방내방은 사용자가 자신의 인테리어 사진을 등록하거나 가구 판매 링크를 업로드할수 있는 SNS 웹 서비스입니다.

진행 과정
  • 매일 아침 스크럼과 Google Sheet를 통한 작업 공유. 팀원의 집이나 Zoom을 활용한 협업으로 빠른 의사소통 진행

상세 역할
  • 메인 피드 페이지와 검색 기능 페이지 개발, 프로필 이미지 미리보기 컴포넌트와 하단 NavBar 컴포넌트 생성, 전체적인 기획 및 디자인 작업 담당 (FE 4명)

트러블 슈팅
  • Axios instance 생성과 API 분리를 통한 코드 중복 최소화와 가독성 향상

  • 검색 값 검증 후 요청 방식 적용으로 불필요한 서버 요청 문제 해결

  • base64 인코딩 방식 적용으로 프로필 이미지 미리보기 기능 향상

성과 및 기여
  • Git flow를 도입하기 위해 팀원들과 함께 학습하여 프로젝트에 적용

  • axios를 이용한 API 통신 방법 및 react 사용 방법 익혀 기능 구현

링크 저장소 링크

대외활동

활동명

멋쟁이 사자처럼, 대학생 프로그래밍 동아리

소속/기관명

멋쟁이 사자처럼

연도

내용
  • 리액트 스터디에 참여하여 컴포넌트 라이프사이클 메서드, 그리고 리액트 Hooks에 대한 개념과 사용 예제를 정리하여 발표했습니다.

  • 해커톤에서는 리더로서 팀원의 역할 분담과 회의 진행을 주도하였으며, 프로젝트 기획 단계부터 개발 및 배포까지 참여하였습니다.

교육

소속/기관명

성신여자대학교

종류 | 전공

대학교(학사) | 서비스디자인공학과 주전공 | 컴퓨터공학과 복수전공 | 학점: 3.83

재학 기간 | 재학 상태

2017.03. ~ 2022.02. | 졸업

소속/기관명

멋쟁이 사자처럼 프론트엔드 스쿨

종류 | 전공

사설 교육 | 프론트엔드

재학 기간 | 재학 상태

2022.03. ~ 2022.08. | 졸업

소속/기관명

멋쟁이 사자처럼 프론트엔드 스쿨 플러스

종류 | 전공

사설 교육 | 프론트엔드

재학 기간 | 재학 상태

2023.10. ~ 2023.12. | 졸업

자격증

자격증명

정보처리기사

점수 | 발급기관

필기 및 실기 최종 합격 | 한국산업인력공단

취득연월

2022.06.

포트폴리오

URL

link

포트폴리오 링크

URL 링크
link

깃허브 주소

깃허브
댓글