시작을 두려워하지 않는 프론트엔드 개발자 ' ' 입니다.

이주연

About me

이름

주소

이메일
이 주 연 (LEE JU YEON)

서울 중구 신당동

wndus3136@gmail.com

생년월일

연락처

학력
1995. 10. 30.

+82 10-6242-8520

영남대학교(생활제품 디자인학과) 졸업

License

웹디자인 기능사 (2023. 07.)

2종보통 운전면허증 (2014. 01.)
Education
(2023. 12. 30. ~ 2023. 07. 14.)
[스마트웹 & 콘텐츠개발]
프론트엔드 개발자 (자바스크립트, React)
양성과정 수료(950시간)
Experience
2020. 07. ~ 2022. 06.(2년)
㈜ 시엘(쇼핑몰)_디자이너
2019. 03. ~ 2020. 06.(1년 3개월)
JY쇼핑(쇼핑몰)_디자이너
2018. 02. ~ 2018. 08.(6개월)
워킹홀리데이 (호주)

MySkill

Mouse over !

개발에 필요한 스택과 시너지를 낼 수 있는 다양한 기술을 보유하고 있습니다.
자세한 내용은 마우스를 올려주세요.

HTML5

- 웹표준과 DOM구조에 대한 이해를 바탕으로 시멘틱 태그를 사용한 구조화 기능

- 콘텐츠 구성 및 UI 배치를 통한 웹 사이트 구현 가능

CSS3

- 레이아웃, 색상, 폰트, 크기 등에 대한 디자인 적용 가능

- 콘텐츠 구성 및 UI 배치를 통한 웹 사이트 구현 가능

JavaScript

- 함수형 프로그래밍을 통한 데이터 처리를 통해 데이터 동적 변경 가능

- 특정 기증 구현을 위한 플러그인 사용 가능

React

- 컴포넌트를 사용해 사용자 인터페이스 및 UI 구성 요소 구축 가능

- React Hook을 사용하여 컴포넌트 단위의 상태 관리 가능

Project

Click !

JO MALONE LONDON

페이지네이션, 필터, 포토리뷰 작성 및 등록
- DEVICE
- TOOL
- PROCESS
- PERIOD
- Web
- Figma, VScode, Git, Github
- HTML, SCSS(SASS), Node.js, jQuery, JavaScript
- 2주 (기획, 코딩)
LOGIN/ SIGN UP

로그인/ 회원가입 기능 구현
- DEVICE
- TOOL
- PROCESS
- PERIOD
- Web
- Figma, VScode, Git, Github
- HTML, SCSS(SASS), jQuery, JavaScript
- 2일 (기획, 코딩)
국립현대 미술관

반응형 UI/UX 웹사이트 제작
- DEVICE
- TOOL
- PROCESS
- PERIOD
- Web/ Tablet / Mobile
- XD, VScode, Git, Github
- HTML, CSS, jQuery, JavaScript
- 4주 (기획, 코딩)
likalika

리액트 사이트
- DEVICE
- TOOL
- PROCESS
- PERIOD
- Web
- VScode, Git, Github
- React, HTML, CSS, JavaScript
- 3일 (기획, 코딩)

Mobile
Tablet
Web

PLAN

[국립현대미술관]

▶ 프로젝트 소개

▶ 주요기능

▶ 구현한 기능

▶ 기술스텍

▶ URL

▶ 기획의도

국립현대미술관 UI/UX 반응형 웹

- UI/UX 반응형(모바일/ 테블릿/ 저해상도PC/ 고해상도PC)

- 12칼럼

- 이미지 슬라이더

- 필터 기능

- 시트탭 기능

HTML, CSS, jQuery, JavaScript

국립현대미술관

전시회 관람을 위해 국립현대미술관 홈페이지를 방문했을 때
해당 전시를 찾고 예매까지 이어지는데 다소 어려움을 느꼈습니다.
이를 개선하여 많은 이용객들에게 도움이 되었으면 하는 마음으로
개발하게 되었습니다.

[기능추가]
- 자주 사용하는 메뉴는 퀵메뉴로 제작하여 찾기 쉽게!
- 필터를 사용하여 지역별로 미술관분류!
- 홈페이지 메인에 뉴스레터와 유튜브 넣어 소식을 빠르게 전달!
- 디지털 미술관 구현!

UI/UX로 홈페이지를 제작함으로써 가독성과 가시성을 높였으며
다양한 기능을 추가하여 편리하면서도 유용할 수 있도록 기획했습니다.

PAGE _ ( main/ sub/ detail )

PLAN

[JOMALON]]

▶ 프로젝트 소개

▶ 주요기능

▶ 구현한 기능

▶ 기술스텍

▶ URL

▶ 기획의도

조말론런던 적응형 웹

- 컬렉션 홍보 메뉴

- 테스트를 통한 향수추천

- 상황별 제품 추천

- 페이지네이션

- 필터기능 (서브페이지)

- 포토리뷰 작성 및 등록 (디테일페이지)

HTML, SCSS(SASS), Node.js, jQuery, JavaScript

조말론런던

MZ세대의 니치향수 관심이 높아지며 국내 소비자들의
웹 사이트 빈도가 상승하였습니다.
웹 접근성과 사용성을 개선하여 정보전달력을 높임으로
최종적으로 구매를 유도하고자 하였습니다.

[기능추가]
- 폰트 스타일과, 크기를 조정하여 사용장의 가독성 상승
- 원하는 페이지를 쉽게 찾을수 있도록 메뉴배치
- 현재 트렌드에 맞는 이슈 컨텐츠를 배치
- 정적인 사이트보다 역동적으로 구현

기존의 정적이고 불편함을 개선하고 부가적인 기능을 추가하여
상품에 대한 접근성을 높이기 위해 기획했습니다.

Login
Sign Up
Flow Chart

PLAN

[Login/ Sign Up]

▶ 프로젝트 소개

▶ 주요기능

▶ 구현한 기능

▶ 기술스텍

▶ URL

▶ 기획의도

조말론런던 로그인/ 회원가입

- 로그인 기능 구현

- 회원가입 기능 구현

- 중복확인

- 비밀번호 확인

- 약관동의

HTML, CSS, jQuery, JavaScript

로그인페이지: 사용자는 아이디와 비밀번호를 입력하여 로그인할 수 있습니다. 로그인 시도 후에는 이용약약관 동의를 받습니다.

회원가입 기능: 사용자가 회원가입을 시도하면,
필수 정보를 입력한 후에 아이디 중복 확인을 거칩니다.
중복이 없을 경우 비밀번호를 입력하고, 비밀번호 확인을 통해 일치 여부를 확인합니다. 모든 과정이 완료되면 회원가입이 완료됩니다.

사용자의 편의성과 접근성을 고려하여 프론트엔드를 개발하는 것을 목표로 하였습니다. 특히 로그인 페이지와 회원가입 기능을 구현하는 과정에서 플로우차트를 이용해 사용자의 초점을 맞추어 개선하였습니다.

likalika

PLAN

[likalika]

▶ 프로젝트 소개

▶ 주요기능

▶ 기술스텍

▶ URL

▶ 기획의도

리카리카 리액트사이트

- 장바구니 기능 구현

- 상품 선택시 각 디테일페이지 연결

- 다른 페이지에서도 검색결과 상태 유지

- 실시간 데이터 업데이트

React, HTML, CSS, JavaScript

likalika

"리카리카"는 리액트를 사용하여 개발되었으며,
반려동물 용품 온라인 쇼핑 플랫폼입니다.

[기능추가]
- 장바구니에 담기 기능구현, 장바구니에서 상품확인 및 수정.
- 장바구니에 담긴 상품의 수량을 조절 및 삭제 기능.
- 서치기능을 통해 상품을 쉽고 빠르게 찾아 서치페이지와 연동.

리액트: 컴포넌트 기반 아키텍쳐를 활용하여 유연하고 재사용 가능한 코드를 작성하였습니다.
상태관리 라이브러리: Recux 상태 관리 라이브러리를 활용하여 전역 상태 관리를 구현하였습니다.
라우팅: React Router를 사용하여 페이지 간의 이동을 관리하고 사용자 경험을 향상 시켰습니다.

리액트를 사용하여 사용자 중심의 UI/UX로 사용자에게 편리함을 제공하는 개발경험을 쌓을 수 있었습니다.