Yena, Jo

조예나

창의적인 아이디어로 기획을 이끌며,
그 아이디어를 손끝에서 현실로 구현할 줄 아는 개발자입니다.
저에 대해 알고싶다면 'HeLLo!' 버튼을 눌러주세요!

Click Me !

About

NAME

조예나 (Yena Jo)

DoB

2002.01.18

LOCATION

서울시 송파구

NUMBER

010-7715-0958

Github

github.com/yyyenaak

E-MAIL

dpsk185@naver.com

"책임을 다하는 사람만이 변화의 기회를 얻을 수 있습니다."

책임을 다하는 과정에서 배움을 얻고, 이를 바탕으로 더 큰 도전에 나아갈 수 있다고 믿습니다.
변화의 순간이 찾아왔을 때 주저하지 않는 것도, 성실히 쌓아온 경험과 신뢰가 있기에 단순히 주어진 업무를 수행하는 것을 넘어, 그 안에서 성장하고 새로운 가능성을 만들어 나가는 것이 저의 원동력입니다.

Skills

Familier

HTML
CSS
SCSS
React
Git
Figma

Tried

Java
MySQL
PHP

Langeage

JavaScript
TypeScript
Python

Projects

Yena-Portfolio

2025.01-2025.02 (개인 프로젝트)

프론트엔드 포트폴리오 제작

React, HTML, SCSS, JS을 활용한 포트폴리오 웹사이트 제작

취업용으로 기획 및 반응형 디자인을 구상 및 적용

스크롤 및 애니메이션 활용하여 가독성 향상

직관적인 UI/UX로 프로젝트와 역량 강조하고자 함

https://github.com/yyyenaak/yyyenaa-portfolio.git

HTML5 버전

hhttps://github.com/yyyenaak/yenapofol.git

React 버전

React, HTML, CSS, SCSS, Tsx, JS

Yena-Portfolio

2025.01-2025.02 (개인 프로젝트)

📌 Summary

React, HTML, SCSS, JS을 활용한 포트폴리오 웹사이트 제작

취업용으로 기획 및 반응형 디자인을 구상 및 적용

스크롤 및 애니메이션 활용하여 가독성 향상

직관적인 UI/UX로 프로젝트와 역량 강조하고자 함

💡 Background

"Hello World, Hello Yena !"

프론트엔드 개발자로서의 기술력과 UI/UX 설계 역량을 확인하고, 제 자신을 효과적으로 소개할 수 있는 사이트를 만들고 싶어 취업용 포트폴리오 웹사이트를 제작했습니다.
초기에는 HTML, CSS, JavaScript를 활용하여 정적인 웹사이트를 개발한 후, 유지보수성과 확장성을 고려하여 React 기반으로 리팩토링을 진행했습니다.
React의 컴포넌트 기반 아키텍처를 적용해 코드의 재사용성을 높였으며, map 함수를 활용하여 카드 뷰, 모달 팝업, 이미지 슬라이드 등 반복되는 UI 요소를 동적으로 렌더링하도록 구현했습니다. 또한, 프로젝트별 필터 기능을 추가해 원하는 정보를 쉽게 찾을 수 있도록 했으며, 인터랙티브 요소를 활용하여 사용자 경험을 개선했습니다.
반응형 웹 디자인을 적용해 다양한 디바이스에서 최적의 경험을 제공하며, 이미지 최적화 및 비동기 데이터 로딩을 통해 성능을 개선했습니다. 단순한 소개용 페이지를 넘어, 실제 프로젝트 경험과 역량을 강조할 수 있는 플랫폼이 되도록 개발했습니다.

🔗 URL

https://github.com/yyyenaak/yyyenaa-portfolio.git

HTML5 버전

hhttps://github.com/yyyenaak/yenapofol.git

React 버전

🔨 Technology Stack(s)

React, HTML, CSS, SCSS, Tsx, JS

🖼️ Image

Main Landing Page

About

Skills

Projects

Modal page

Farmy

2024.07-2024.11 (학교 프로젝트)

AI를 활용한 스마트팜 원격제어 시스템

Chat GPT를 활용한 스마트팜 제어 시스템 구축 및 개발

온도, 습도, 조도, 토양 수분센서 연동, 모니터링 및 제어

안드로이드 스튜디오, GPTs, HTML, CSS, JS 개발 담당

IT 캡스톤 디자인 출품 및 최우수상 수상

https://github.com/yyyenaak/Farmy_fin-ver..git

HTML, CSS, JS, Java, Android Studio, Arduino, LLM, Prompt Engineering, Ascii

Farmy

2024.07-2024.11 (학교 프로젝트)

📌 Summary

AI를 활용한 스마트팜 원격제어 시스템입니다.

Chat GPT를 활용한 스마트팜 제어 시스템 구축 및 개발

온도, 습도, 조도, 토양 수분센서 연동, 모니터링 및 제어

안드로이드 스튜디오, GPTs, HTML, CSS, JS 개발 담당

💡 Background

"모든 환경을 한눈에, 직관적으로 제어하다."

Farmy는 스마트팜 원격제어 시스템 애플리케이션으로, 사용자가 언제 어디서나 온도, 습도, 조도, 토양 수분 등의 환경 데이터를 손쉽게 모니터링하고 제어할 수 있도록 설계되었습니다. 특히, 원격제어 기능을 중심으로 개발되어 사용자가 직접 농장에 방문하지 않아도 스마트 기기를 통해 환경을 즉각적으로 조정할 수 있습니다.
Farmy는 스마트팜의 복잡한 환경을 효율적으로 관리할 수 있도록, ChatGPT를 활용한 실시간 데이터 분석 및 맞춤형 조언 기능을 제공하여 작물의 생육 상태를 종합적으로 파악하고 최적의 재배 환경을 유지할 수 있도록 지원합니다.
직관적인 사용자 인터페이스(UI)를 통해 스마트팜을 효과적으로 운영할 수 있으며, 실시간 데이터 확인뿐만 아니라 자동화된 데이터 기반 제어 시스템을 활용해 최적의 농업 환경을 조성할 수 있습니다. 이를 통해 농업 생산성을 극대화하고, 작물의 건강한 성장을 지속적으로 관리할 수 있도록 개발되었습니다.

🔗 URL

https://github.com/yyyenaak/Farmy_fin-ver..git

🔨 Technology Stack(s)

HTML, CSS, JS, Java, Android Studio, Arduino, LLM, Prompt Engineering, Ascii

🖼️ Image

Main Index

Farmy의 메인 인덱스는 스마트팜의 핵심 환경 데이터를 직관적으로 시각화하고 간편하게 제어할 수 있도록 설계되었습니다.

상단: 온도, 습도, 조도, 토양 수분 등 주요 환경 데이터를 실시간으로 제공하여, 작물의 상태를 한눈에 확인하고 신속하게 관리할 수 있습니다.

온도(온도계 아이콘): 최적의 온도를 설정 및 조절
습도(팬 아이콘): 적정 습도 유지 및 모니터링
조도(전구 아이콘): 조명 시스템 제어로 광합성 지원
토양 수분(식물+물방울 아이콘): 토양 수분 상태 확인 및 자동 공급

하단: Chat me! (ChatGPT 연동) 기능을 통해 실시간 데이터 분석 및 최적의 환경 설정을 제안하여, 스마트한 작물 관리를 지원합니다.

메인 화면은 녹색과 파란색 그라데이션을 활용해 자연 친화적인 감성을 강조하며, 심플하고 직관적인 레이아웃으로 누구나 쉽게 사용할 수 있도록 설계되었습니다.

Controll Pop-up

Farmy의 팝업은 사용자가 작물 생장에 중요한 온도, 습도, 조도, 토양 수분을 세밀하게 조절할 수 있도록 설계되었습니다. 메인 화면에서 해당 항목을 클릭하면 팝업이 중앙에 표시되며, 배경을 흐리게 처리하여 사용자가 선택한 센서의 데이터 조절에 집중할 수 있도록 최적화되었습니다.

온도 범위: 0°C부터 30°C까지 제공되며, 다양한 작물의 생육 조건에 맞춰 조절할 수 있습니다.
슬라이더 디자인: 간결하고 직관적인 인터페이스로 설계되어, 사용자가 불편함 없이 쉽게 조작할 수 있습니다.

우측 상단: 닫기(X) 버튼을 배치하여 팝업을 빠르게 종료하고, 메인 화면으로 원활하게 돌아갈 수 있도록 설계되었습니다.

이는 불필요한 요소를 최소화하고 핵심 기능에 집중하여, 간편하면서도 정밀한 환경 제어 기능을 제공합니다.

Farmy GPTs

Farmy GPTs는 스마트팜과 식물 관련 정보를 쉽고 빠르게 탐색하고 학습할 수 있도록 설계된 AI 도우미입니다. 메인 화면에서 식물 성장과 환경 조절에 대한 질문을 선택하면 AI가 해당 정보를 제공하며, 사용자는 실시간으로 스마트팜 관리에 필요한 데이터를 얻을 수 있습니다.

질문 선택 방식: "토마토 성장의 적정 온도는?", "강낭콩 성장의 적정 습도는?" 등과 같은 버튼형 질문을 제공하며, 클릭하면 AI가 적절한 답변을 제공합니다.
메시지 입력창: 사용자가 자유롭게 질문을 입력할 수 있도록 하단에 배치되었으며, 첨부 파일 업로드 및 음성 입력 기능도 지원됩니다.

Farmy GPTs

Zero-Shot Prompting: 사전 학습 없이도 즉각적인 답변을 생성하여 스마트팜과 식물 관련 정보를 제공합니다.
Chain of Thought: 논리적 사고 과정을 적용해 단계별 추론을 수행하며, 보다 정확하고 신뢰도 높은 답변을 제공합니다.
Automatic Prompt Engineering: 사용자의 질문을 분석하고 최적화하여, 자연스럽고 정확한 답변을 생성합니다.

불필요한 정보는 최소화하고 핵심 내용과 파생 정보에 집중하여, 간편하면서도 효과적인 정보 탐색이 가능하도록 최적화되었습니다. 또한, 제약조건 설정을 통해 식물과 스마트팜 관련 질문 외에는 입력할 수 없도록 설정하였습니다.

Farmy

앱 디자인 후 WebView 방식으로 개발을 계획했으나, 실시간 데이터 제공을 위해 1차로 HTML, CSS, JS 기반으로 개발하였습니다. 이후, 안드로이드 앱 개발을 위해 XML과 Java를 활용한 2차 개발을 진행하였으며, 실시간 데이터 UI 및 제어 토글 화면을 수정하여 최종 디자인과 개발을 완료하였습니다.

안드로이드 스튜디오에서 Main.java의 private void를 활용해 센서 스위치 작동을 구현하고, String command를 통해 ON/OFF 제어가 가능하도록 개발하였습니다. 특히, 조도 센서는 LED 작동을 위해 RGB 값을 0-255 범위로 설정하여 세밀한 제어가 가능하도록 하였습니다.
스마트팜 개발을 위해 관련 모듈을 조립하고, 자동/수동 모드 전환이 가능한 아두이노 코드를 작성하였습니다. 아두이노와 연동하여 센서 데이터를 실시간으로 송수신하고, 코드 최적화를 통해 안정적인 데이터 처리가 가능하도록 구현하였습니다.

또한, 블루투스 소켓을 활용해 스마트팜과 안드로이드 앱을 연동하고, private static final을 통해 HC06 주소와 UUID를 설정하여 안정적인 통신을 구현하였습니다.

이순종, Design for Life

2024.01-2024.06 (U:Companion)

이순종 교수님 포트폴리오 웹사이트 제작

서울대학교 미술대학 소속 교수님의 작품,전시를 기록한 포트폴리오 사이트 제작.

화이트 톤의 미니멀한 디자인과 직관적인 UI 구현

작품 키워드 분류 기능과과 Contact 기능 추가로 접근성 향상.

PM, 기획, 일부 퍼블리싱을 담당하여 프로젝트 전반을 주도

http://leesoonjong.com

기획: PM, Excel, Figma | 개발: HTML, CSS, JS, MySQL

이순종, Design for Life

2024.01-2024.06 (U:Companion)

📌 Summary

서울대학교 미술대학 소속 교수님의 작품,전시를 기록한 포트폴리오 사이트 제작.

화이트 톤의 미니멀한 디자인과 직관적인 UI 구현

작품 키워드 분류 기능과과 Contact 기능 추가로 접근성 향상.

PM, 기획, 일부 퍼블리싱을 담당하여 프로젝트 전반을 주도

💡 Background

"Lee Soon Jong, Design for Life"

이 프로젝트는 서울대학교 미술대학 교수님의 작품과 전시 이력을 아카이빙하고, 효과적으로 전달할 수 있는 포트폴리오 사이트를 제작하는 것이 목표였습니다. 사이트의 전체적인 디자인은 화이트 톤을 기반으로 한 미니멀리즘 스타일을 추구하여 교수님의 작품이 돋보일 수 있도록 구성했습니다.
또한, 사용자가 원하는 정보를 빠르게 찾을 수 있도록 작품을 키워드별로 분류하는 기능을 추가하고, Contact 페이지를 통해 교수님과의 원활한 소통이 가능하도록 설계했습니다. 프로젝트에서 저는 PM 역할을 수행하며 기획을 주도했고, 일부 퍼블리싱 작업도 맡아 사이트의 완성도를 높이는 데 기여했습니다.

🔗 URL

http://leesoonjong.com

🔨 Technology Stack(s)

기획: PM, Excel, Figma
개발: HTML, CSS, JS, MySQL

🖼️ Image

Landing Page

Search Bar

List Page

Detail-Work

Detail-Event

Detail-Media

U:COMPANION GROUP

2024.06-2024.08 (U:Companion)

유컴패니온 웹사이트 Dropbox 구축 및 리뉴얼

유컴패니온 회사명 변경, 자회사 설립을 위한 웹사이트 리뉴얼 진행

네이게이션 바 X 버튼 동작 수정

랜딩페이지 슬라이더 구축 및 수정

퍼블리싱 수정 후 php 개발 및 업로드

https://ucomp.co.kr

HTML, CSS, JS, PHP

U:COMPANION GROUP

2024.06-2024.08 (U:Companion)

📌 Summary

유컴패니온 회사명 변경, 자회사 설립을 위한 웹사이트 리뉴얼 진행

네이게이션 바 X 버튼 동작 수정

랜딩페이지 슬라이더 구축 및 수정

퍼블리싱 수정 후 php 개발 및 업로드

💡 Background

"Dream UP, U:Companion Group"

이 프로젝트는 제가 회사에서 진행한 마지막 프로젝트로, 유컴패니온의 브랜드 리뉴얼과 유컴패니온 그룹 및 자회사 확장을 위한 웹사이트 개편이 메인이었습니다. 회사의 새로운 방향성을 반영하여 디자인을 개선하고, 사용자 경험을 최적화하는 데 중점을 두었습니다.
특히, 메인 슬라이더의 부드러운 동작 구현을 위해 세밀한 애니메이션 조정을 진행하였으며, 이를 통해 보다 자연스럽고 직관적인 사용자 경험을 제공할 수 있도록 했습니다. 또한, 네비게이션 바의 X 버튼 동작 오류를 수정하여 UI의 완성도를 높였습니다. 마지막으로, PHP 개발을 처음으로 시도하여 퍼블리싱 작업 이후 서버 사이드 기능을 추가하고, 최종적으로 업로드까지 진행하며 프로젝트를 마무리했습니다.

🔗 URL

https://ucomp.co.kr

🔨 Technology Stack(s)

HTML, CSS, JS, PHP

🖼️ Image

Landing Page

Slide

Dropbox

KALDA

2024.04-2024.05 (U:Companion)

한국국토교통데이터진흥협회 공식 웹사이트 구축

한국국토교통데이터진흥협회(KALDA) 공식 웹사이트 구축

구축 퍼블리싱 단독으로 담당

메인 슬라이더의 부드러운 동작 최적화

지도 API를 활용한 위치 기반 정보 제공 구현

https://Kalda.or.kr

* 오픈 준비로 인한 서버 다운

HTML, CSS, JS

한국국토교통데이터진흥협회(KALDA) 공식 웹사이트 구축

2024.04-2024.05 (U:Companion)

📌 Summary

한국국토교통데이터진흥협회(KALDA) 공식 웹사이트 구축

구축 퍼블리싱 단독으로 담당

메인 슬라이더의 부드러운 동작 최적화

지도 API를 활용한 위치 기반 정보 제공 구현

💡 Background

"Korea Association for Land, infrastructure transport Data Advancement"

이 프로젝트는 국토교통부 산하 협력 기관인 ‘한국국토교통데이터진흥협회(KALDA)’의 공식 웹사이트를 구축하는 작업으로, 협회의 설립 취지와 주요 사업을 효과적으로 전달하고 국토교통 데이터 산업 활성화를 지원하는 온라인 플랫폼을 마련하는 것이 목표였습니다.
웹사이트는 직관적인 UI/UX를 기반으로 설계되었으며, 특히 메인 슬라이더의 부드러운 동작을 구현하여 사용자 경험을 개선하고 가독성을 높였습니다. 또한, 지도 API를 활용해 국토교통 데이터와 관련된 위치 기반 정보를 제공함으로써 협회의 주요 사업과 서비스 접근성을 강화했습니다. 이 프로젝트에서는 퍼블리싱과 개발을 단독으로 담당하며, 기능 구현, 최적화, 배포까지 전 과정에서 완성도를 높이는 데 주력했습니다.

🔗 URL

http://kalda.or.kr

* 오픈 준비로 인한 서버 다운

🔨 Technology Stack(s)

HTML, CSS, JS

🖼️ Image

Landing Page

Slide

Map API

Crewdays Demo

2024.01-2024.02 (U:Companion)

크루데이즈 랜딩페이지 데모 제작

크루데이즈(CrewDays) 기업 연휴선물 쇼핑몰 데모버전 제작

초기 프로토타입 개발 및 사용자 테스트 진행

React 및 TypeScript 기반 UI/UX 설계 및 동적 요소 구현

스크롤 애니메이션 추가로 부드러운 사용자 경험 제공

https://github.com/yyyenaak/crewdays-demo

React, Tsx, JS, SCSS

크루데이즈 랜딩페이지 데모 제작

2024.01-2024.02 (U:Companion)

📌 Summary

크루데이즈(CrewDays) 기업 연휴선물 쇼핑몰 데모버전 제작

초기 프로토타입 개발 및 사용자 테스트 진행

React 및 TypeScript 기반 UI/UX 설계 및 동적 요소 구현

스크롤 애니메이션 추가로 부드러운 사용자 경험 제공

💡 Background

"크루데이즈: 기업 선물 관리를 편하게"

크루데이즈(CrewDays)는 기업 고객을 위한 연휴 선물 쇼핑몰로, 명절 및 기념일 맞춤형 선물 제공을 효율화하는 플랫폼입니다. 기업이 직원 및 고객사에 손쉽게 선물을 제공할 수 있도록 직관적인 UI/UX 설계와 반응형 웹 개발을 진행했습니다. 또한, 기존의 번거로운 선물 신청 및 배송 관리 프로세스를 간소화하여 기업이 보다 체계적으로 선물 관리를 할 수 있도록 최적화하는 것이 목표였습니다.
이 프로젝트에서는 React와 TypeScript를 활용해 인터랙티브한 UI를 구축하고, SCSS를 적용하여 최신 스타일링을 반영했습니다. 또한, 스크롤 애니메이션과 Swiper 기반 상품 슬라이더를 도입해 부드러운 사용자 경험을 제공하고, 쇼핑몰 내 상품 탐색을 직관적으로 개선했습니다.
특히, 링크 기반 선물 신청 시스템을 통해 기업이 직원 정보를 직접 취합할 필요 없이 편리하게 선물을 발송할 수 있도록 설계되었습니다. 또한, 관리자가 대시보드에서 실시간으로 선물 신청 현황을 확인하고 효율적으로 출고를 관리할 수 있도록 데이터 시각화를 강화했습니다.
초기 프로토타입을 성공적으로 완성하고 사용자 테스트를 거쳐 피드백을 반영하며, 서비스의 실효성을 검증하고 향후 확장 가능성을 확보했습니다.

🔗 URL

https://github.com/yyyenaak/crewdays-demo

🔨 Technology Stack(s)

React, Tsx, JS, SCSS

About

Skills

Familier

Tried

Langeage

Projects

Hello, Yena

Yena-Portfolio

Hello, Yena

Farmy

Hello, Yena

이순종, Design for Life

Hello, Yena

U:COMPANION GROUP

Hello, Yena

한국국토교통데이터진흥협회(KALDA) 공식 웹사이트 구축

Hello, Yena

크루데이즈 랜딩페이지 데모 제작