Woo Sujeong

About

상세정보 보기

상세정보 닫기

NAME 우수정 Woo Sujeong

E-MAIL woochryfront@gmail.com

Birthdate 1997. 02. 05

license 2020. 09 웹디자인개발기능사

CAREER 2025. 07 ~ ㈜펜타에스, 프론트엔드 2020. 12 ~ 2023. 04 ㈜플래시21, 퍼블리셔 2020. 08 ~ 2020. 11 ㈜라임, 웹디자이너

EDUCATION 2024. 06 ~ 2025. 02 프론트엔드(React, ReactNative) 웹개발&앱개발자 취업캠프 수료 2020. 09 ~ 2020. 11 웹(JavaScript, jQuery)제작 직무향상과정 수료 2020. 03 ~ 2020. 07 웹디자인신규구직자양성과정 수료 2015. 03 ~ 2020. 09 경북대학교 미술학과 졸업 2012. 03 ~ 2015. 02 진주 중앙고등학교 졸업

사용자 경험을 생각하는 웹 퍼블리셔

웹 접근성과 웹 표준을 중요하게 생각하며, 사용자가 편리하게 이용할 수 있는 화면을 구현하는 퍼블리셔입니다. 4년간 다양한 프로젝트를 경험하며 HTML, CSS, JavaScript를 활용한 반응형 웹 구축과 UI 구현 역량을 쌓았으며, React 기반 프로젝트를 통해 프론트엔드 개발 경험도 함께 넓혀왔습니다.

프로젝트를 완성하는 협업 능력

HTML, CSS, JavaScript 기반의 웹 화면 구현 경험과 함께 React 프로젝트에 참여하며 컴포넌트 기반 UI 개발과 동적 화면 구현 경험을 쌓았습니다. 기획자, 디자이너, 개발자와 협업하며 디자인 시안을 실제 서비스 화면으로 구현하고, API 연동 및 유지보수 업무까지 경험하며 퍼블리셔와 프론트엔드 영역을 넓혀가고 있습니다.

책임감으로 완성하는 웹 퍼블리싱

맡은 업무를 끝까지 책임지고 해결하기 위해 노력하며, 새로운 기술과 작업 방식에도 적극적으로 배우고 적용하는 자세를 가지고 있습니다. 작은 디테일까지 고민하며 더 나은 사용자 경험을 제공하는 퍼블리셔가 되고자 합니다.

Skill

Stack

React

useState 훅을 사용하여 파일 업로드 상태 관리
사용자가 입력한 데이터 서버 전송 비동기적 처리 가능
컴포넌트로 구조화하여 효율적으로 관리

JavaScript

클라이언트와 서버 간의 데이터 전송을 위해 Axios 라이브러리를 사용하여 HTTP 요청 처리 가능
세션 관리를 통한 로그인 상태 유지 작업 경험

Node.js

REST API 라우터 설계
HTTP 요청 처리 및 세션 관리를 통해 사용자 인증 및 데이터 처리 로직 서버에서 구현
다양한 브라우저에서 호환성 있는 마크업 작성

HTML

웹 페이지 구조 설계에 능숙
웹 표준을 준수한 마크업 작성 경험이 풍부
다양한 브라우저에서 호환성 있는 마크업 작성

CSS

반응형 디자인 및 크로스 브라우저 호환성에 최적화된 스타일 구현
복잡한 레이아웃과 애니메이션을 구현하는 데 능숙

SCSS

변수, 믹스인, 중첩 규칙 등 SCSS의 핵심 기능을 활용하여 스타일을 모듈화하여 사용

JSP

Eclipse를 사용하여 JSP 기반의 웹사이트를 개발한 경험
HTML 마크업 구조, CSS, jQuery를 사용하여 UI 개선 및 동적인 웹 페이지 구현

Express

GET, POST, PUT, DELETE 요청을 처리하는 라우터 구현

SQL

간단한 쿼리 작성으로 기본적인 데이터베이스 관리 가능
Async/Await를 사용하여 비동기적으로 데이터베이스 연결

MySQL

MySQL을 사용하여 데이터 조회 및 삽입을 위한 간단한 SQL 쿼리 작성 가능

MariaDB

MariaDB를 사용하여 데이터 조회 및 삽입을 위한 간단한 SQL 쿼리 작성 가능

firebase

Firebase를 사용하여 실시간 데이터베이스와 게시판 구현 경험

Git

Git을 사용하여 코드 버전 관리 및 협업을 효율적으로 진행

GitHub

GitHub를 활용한 협업 및 버전 관리에 능숙
브랜치를 활용하여 다양한 기능을 개발하고, 충돌 해결 및 코드 병합 작업을 효율적으로 수행

Sourcetree

Sourcetree를 사용하여 Git저장소를 시각적으로 관리 가능
GitHub과의 연동을 통해 Pull Request를 생성
원격 저장소와의 동기화를 원활하게 진행

Eclipse IDE

Push, Commit등을 통해 소스 코드를 버전 관리하고 팀 간의 실시간 변경 사항을 반영하여 팀 프로젝트 진행

Illustrator

기본적인 단축키 사용으로 원하는 시각적 자료를 만들고 가공하는데 익숙

Photoshop

기본적인 단축키 사용으로 원하는 시안을 만들고 가공하는데 익숙

Adobe XD

기본적인 단축키 사용으로 원하는 반응형 프로토타입을 만들고 가공 가능

Figma

기본 기능 사용 가능, 그리드 시스템 구성 및 간단한 시안 제작 경험
디자인 에셋 추출, 치수 확인 등 퍼블리싱 작업에 활용 가능

Study

Projects

팀
반응형
쇼핑몰
프론트엔드

이로케 쇼핑몰 개발 프로젝트

4인 · 24.11.13~24.12.13(1개월)

실제 가구 브랜드 사이트를 비교 분석하여 장점을 결합한 1인 가구를 타겟으로 한 가상의 가구 쇼핑몰 사이트 이로케를 새롭게 구축하였습니다.

이 프로젝트에서는 사용자 쇼핑몰 사이트와 관리자 페이지를 구분하여 개발했습니다.
관리자는 관리자 페이지를 통해 상품을 등록하고, 사용자는 쇼핑몰 페이지에서 등록된 상품을 확인한 후 장바구니 및 주문하기 기능을 통해 상품을 주문할 수 있도록 했습니다. 또한 공지사항, 문의 게시판 등 사용자와의 소통을 위한 기능도 추가하여 쇼핑몰 운영에 필요한 다양한 요소를 구현했습니다.

처음 React를 사용하여 진행한 프로젝트였기 때문에 많은 시행착오가 있었지만, 그 과정에서 얻은 성취감이 담긴 결과물이 되어 매우 의미 있는 작업이었습니다.

Stack

JavaScript
React
HTML
CSS
SCSS
jQuery
Node.js
MariaDB

role

디자인 방향성 결정, CSS 규격화

색상 결정, 로고 제작, 메인 화면 디자인을 담당했습니다.
공통 class로 CSS를 규격화하여 전체적인 레이아웃을 통일했습니다.

관리자 페이지 상품관리
상품 이름, 이미지, 사용 옵션/키워드 설정 등록, 재고 등록, 상품 가격, 할인율 자동 계산 후 최종 가격 반영

Axios와 Express를 사용하여 프론트에서 등록한 정보를 백엔드로 전달해 데이터베이스에 저장했습니다.
다른 팀원이 작업한 옵션/키워드 데이터를 상품 등록 페이지로 가져와, 미리 등록된 옵션/키워드와 그 하위 값을 선택하여 각기 다른 옵션을 가진 상품을 등록할 수 있도록 했습니다.
할인율은 원가에 적용 시 1원 단위가 남아있다면 자동으로 반올림하여 최종 가격에 반영하도록 작업했습니다.
변경되는 금액은 useEffect, useState를 사용하여 실시간으로 변경 값을 적용합니다.

사용자 페이지 상품목록, 상품상세
등록된 상품 목록 수, 상품 정보 조회, 옵션 값 추가 금액, 정보 반영 후 장바구니로 전달

Axios와 Express를 사용하여 관리자 페이지(Port 3000)에서 백엔드에 등록한 데이터를 사용자 화면(Port 5500)으로 가져올 수 있게 했습니다.
선택한 옵션에 추가 금액이 등록되어 있다면 할인율이 반영된 가격에 옵션 금액을 추가하여 최종 가격을 보여줍니다.
선택한 상품들의 정보와 최종 주문 가격 데이터를 다른 팀원이 담당한 장바구니 페이지로 문제없이 전달할 수 있도록 작업했습니다.

Solutions

깃허브 페이지에 리액트 앱 호스팅
빌드파일을 올렸지만 화면이 하얗게 나오는 문제

404 error docs바로 안에 .nojekyll 파일 생성
빌드파일을 올렸지만 화면이 하얗게 나오는 문제 절대경로로 시작하는 파일 경로를 ${process.env.PUBLIC_URL}를 사용하여 자동으로 public폴더 위치를 잡게 수정했습니다.

after요소에 적용된 FontAwsome 폰트
직접 i로 불려온 FontAwsome은 보이지만 font로 적용시키면 오류

all.min.css 파일 기준으로 상위 폴더에 webfonts가 있어야 자동으로 font-family 적용 된다는것 확인

Preview

메인화면

팀
반응형
API
로그인
프론트엔드

API 연동 신라호텔 서울 사이트 리뉴얼 프로젝트

4인 · 25.01.03~25.01.14

신라호텔 서울의 기존 웹사이트의 단점을 분석하고 사용자 편의성과 고급스러움을 강조하여 리뉴얼 작업을 진행했습니다.

이 프로젝트는 타 프로젝트 팀이 작업한 기존 사이트에 실제 사용되는 다양한 API들을 통합하는 작업이었습니다.
팀원마다 네이버 로그인 API, 토스페이, TinyMCE API 등 호텔 예약과 관련된 기능을 제공하는 API들을 선정하여 구현했습니다.

짧은 작업 기간이었지만 일상에서 자주 접하는 API들을 활용하며 실제적인 기술 경험을 쌓을 수 있었습니다.

Stack

JavaScript
React
SCSS
Node.js
MariaDB

role

네이버 로그인 API 연동

네이버에 저장된 회원 정보를 가져와 백엔드에 저장합니다.
기존에 설정된 회원 등록 필수 데이터를 회원 정보 테이블에 저장하기 위해 비밀번호를 유효성 조건에 맞게 랜덤 생성하고, 기본 회원 등급인 3등급으로 지정하도록 작업했습니다.
로그인을 성공하면 Access Token을 받아와 네이버 Developers 사이트에서 설정한 CallBack URL로 정보를 보냅니다.
최종적으로 로그인에 성공하면 사용자 페이지에 네이버에 저장된 이름과 함께 환영 문구가 나오고, 관리자 페이지 회원 목록에서 확인할 수 있습니다.

Preview

로그인 화면
로그인 성공 alert
로그인 성공 시 메인화면

팀
모바일
안드로이드앱
프론트엔드

조말론 런던 안드로이드 앱 개발 프로젝트

4인 · 25.01~25.02(7일)

해외 여행의 증가로 향수 수요가 증가하면서 브랜드의 높은 평판과 웹페이지에 대한 관심도 증가를 반영하여 조말론 런던 웹사이트를 주제로 React Native를 이용한 안드로이드 앱을 만들기로 결정했습니다.

일반 소개 페이지와 게시판 뿐만 아니라 슬라이드, 지도 등 API를 이용한 기능도 적용했습니다.

Stack

React Native
JavaScript
React
SCSS
Node.js
Firebase

role

문의 게시판
게시판 등록, 조회, 수정, 삭제

React Navigation을 이용하여 각 기능을 가진 문의 게시판 페이지로 이동할 수 있도록 설정했습니다.
데이터베이스는 Firebase를 이용해 관리하였습니다.

SNS 웹뷰
인스타그램, 카카오채널, 유튜브 웹뷰

아이콘 클릭 시 각 SNS 링크와 연결된 웹뷰가 모달 창으로 열리도록 작업했습니다.
모달 창 닫기와 뒤로 가기 버튼도 별도로 작업하였습니다.

메인 배너 슬라이드

Swiper API를 이용하여 자동 슬라이드와 좌우 슬라이드 버튼이 적용되도록 작업했습니다.

Preview

문의 게시판 목록 문의 게시판 작성
문의 게시판 상세 문의 게시판 수정 문의 게시판 삭제
SNS 웹뷰

개인
반응형
홈페이지
퍼블리싱

2025 우수정 포트폴리오 사이트 리뉴얼

1인 · 25.03 ~(진행중)

퍼블리셔 포트폴리오 사이트를 프론트엔드 포트폴리오 사이트로 리뉴얼 했습니다.
2025년 트렌드를 반영하여 눈의 피로를 줄여주는 다크모드 스타일로 디자인을 변경했고, 디자인 중심의 내용에서 벗어나 기능과 기술적인 부분을 상세히 설명할 수 있도록 구성했습니다. 기존 사이트에서는 jQuery 위주로 사용했으나, 이번 리뉴얼을 통해 수정하거나 새로 추가된 기능들은 모두 JavaScript로 작성하여 코드의 효율성을 높였습니다.
최종적으로 React, SCSS, Node.js를 사용해 관리하기 편한 사이트로 개선하는 것이 목표입니다.

Stack