dev.jihun.io

프로젝트 소개

이스트소프트 프론트엔드 개발자 양성 과정 2기의 파이널 프로젝트로 제출한 꿈 일기를 작성하고 공유하는 소셜 네트워크 서비스 DREAMER입니다. 사용자는 꿈 일기를 작성하고, 다른 사용자의 꿈 일기를 읽을 수 있습니다. 또한, 사용자는 자신의 꿈을 이스트소프트 앨런 AI를 바탕으로 한 '토몽 AI'에게 해몽을 받을 수 있습니다.

사용 기술

• 프론트엔드: Next.js, React, JavaScript, Module CSS, Redux
• 백엔드: Firebase, Algolia

참여 범위

• 프론트엔드: 코어 기능 개발 및 API 연동, 반응형 웹 디자인 및 접근성 개선
• 백엔드: API 설계 및 Firebase, Algolia 연동

문제 해결 사례

1. 피드 알고리즘 기능

처음에는 피드에 표시되는 게시글의 우선 순위를 Algolia를 활용하여 상호작용 빈도 및 시간 감쇠 점수를 계산하여 우선적으로 표시하고자 했습니다. 그러나 Algolia에서 제공되는 데이터가 실시간으로 인덱싱되지 않아 실제 데이터와 다르게 표시되는 문제가 발생했습니다. 이를 해결하기 위해 차선책으로 Firestore에서 직접 데이터를 가져와서 문제를 일차적으로 해결했습니다.

2. 회원 가입 시 인증 메일 발송

이메일로 회원 가입 기능을 구현하기 위해 Firebase의 Authentication을 사용했고, 회원 가입 로직을 (1) '이메일로 로그인 링크'를 발송하고 (2) 링크를 클릭하여 접속하면 (3) 나머지 회원 가입 절차가 진행되도록 구현했습니다. 그러나, 발송된 이메일 링크를 다른 디바이스에서 클릭할 경우 가입 절차가 진행되지 않는 문제를 확인했습니다.

이를 해결하기 위해 이메일로 로그인 링크 대신 서버에서 인증 코드를 직접 발송하는 방식으로 문제를 해결했습니다. 사용자가 인증 코드 발송 버튼을 클릭하면 백엔드의 nodemailer 패키지가 다음 스마트워크의 SMTP 서버 정보를 활용하여 인증 번호가 담긴 이메일을 발송합니다.

3. 모바일 사용자 경험 개선

모바일 환경에서도 사용자가 편리하게 서비스를 이용할 수 있도록 사용자 경험에 중점을 두었습니다. 특히, 브라우저의 뷰포트 너비가 720px 이하로 줄어들면 브라우저 왼쪽에 자리잡은 헤더가 브라우저 하단으로 이동하도록 만들었습니다. 이 과정에서 기존 헤더의 마크업 구조를 변경하지 않고 CSS의 미디어 쿼리만을 활용하여 모바일 내비게이션 바를 만들 수 있었습니다.

iOS Safari 환경에서 테스트를 하던 중, 일부 textarea 혹은 input 요소에 포커스를 주면 의도치 않게 화면이 확대되는 문제가 발생했습니다. 이 문제의 원인을 찾은 결과, textarea 혹은 input의 font-size 속성이 16px 미만일 경우 iOS Safari에서 자동으로 화면을 확대하는 기능이 있다는 점을 알 수 있었습니다. 이를 해결하기 위해 font-size 속성을 16px 이상으로 설정하여 문제를 해결했습니다.

4. 토몽 AI

토몽 AI는 앨런 AI의 API를 활용하여 사용자가 작성한 꿈을 해몽하도록 설계되었습니다. 그러나 사용자가 꿈 내용 이외의 정보, 특히 수면 중에 경험하는 현상이 아닌 장래희망을 입력하고 토몽 AI에게 해몽을 요청했을 때에도 답변을 생성하는 문제를 확인했습니다. 이를 해결하기 위해 기본 프롬프트에 꿈을 수면 중에 경험하는 현상으로 정의했고, 수면 현상과 관련되지 않거나 기본 프롬프트를 부정하는 경우 답변을 거부하도록 입력하여 문제를 해결했습니다.

링크

• https://dreamer.today
• https://github.com/oreumi-dreamer/Dreamer

프로젝트 소개

마크다운 문법을 사용하여 깔끔하고 간편하게 문서를 작성할 수 있는 데스크톱 애플리케이션입니다. 마크다운이 디지털 환경에 최적화되어 있고 세부적인 스타일을 별도로 지정하기 어렵다는 한계점을 극복하기 위해 개발하게 되었습니다.

특징

MarkPaper는 기존 마크다운 문서에서는 불가능한 파일 내 사진 직접 첨부를 지원하기 위해 *.mp 형식의 파일을 기본으로 사용합니다. *.mp 파일은 ZIP 압축 포맷을 기반으로 작동하며, 파일 구조는 다음과 같습니다:

📦예시 문서.mp
 ┣ 📂images
 ┃ ┣ 📜예시 사진 1.jpg
 ┃ ┣ 📜예시 사진 2.jpg
 ┃ ┗ 📜예시 사진 3.jpg
 ┣ 📜content.md
 ┗ 📜metadata.json

1. /images: 문서에서 사용되는 사진 파일들이 보관되는 디렉토리입니다.
2. content.md: 마크다운 본문 파일입니다.
3. metadata.json: 파일의 메타데이터와 사진 목록을 관리하는 파일입니다.

참여 범위

데스크톱 애플리케이션 제작 및 배포

링크

• https://github.com/jihun-io/MarkPaper

프로젝트 소개

대한민국의 지상파 3사 및 기타 방송사들의 라디오 스트리밍을 한 곳에서 재생할 수 있게 만든 모바일 및 웹 애플리케이션입니다. 라디오 방송을 듣기 위해 각 방송사의 라디오 스트리밍 앱을 설치해야 하는 불편함을 해소하고자 개발했습니다.

참여 범위

모바일 및 데스크톱 애플리케이션 제작 및 배포

• iOS 및 Android 앱: React Native, TypeScript
• macOS 및 Windows 앱: Electron, React, TypeScript, Tailwind CSS
• 백엔드: Cloudflare Workers

링크

• https://github.com/jihun-io/Moradio
• https://github.com/jihun-io/Moradio-Desktop

프로젝트 소개

GitHub 프로필 및 README 문서에 사용할 수 있는 배지를 생성하는 웹 애플리케이션입니다.

기술 검색 창에 검색어를 입력하면 Simple Icons의 아이콘 목록 데이터를 기반으로 검색 결과를 제공하며, 원하는 기술을 선택하면 해당하는 아이콘과 컬러를 바탕으로 Shields.io의 API를 활용하여 배지 이미지로 만들어 줍니다.

참여 범위

• 웹 사이트 제작 및 배포

기술 스택

• 프론트엔드: Next.js, React, JavaScript, Tailwind CSS
• 배포 환경: Cloudflare Pages

링크

• https://badge.jihun.io
• https://github.com/jihun-io/Badge-Generator

프로젝트 소개

jihun의 포트폴리오 페이지입니다. 정적 웹으로 제작했던 기존의 프로젝트를 Next.js로 리팩토링했습니다.

참여 범위

• 웹 사이트 제작 및 배포

기술 스택

• 프론트엔드: Next.js, React, Tailwind CSS
• 배포 환경: Cloudflare Pages, Cloudflare Workers

링크

• https://dev.jihun.io
• https://creative.jihun.io

프로젝트 소개

단편영화 ⟨혹성의 아이⟩(2024)의 영화와 상품 홍보, 커뮤니케이션을 위한 홈페이지입니다.

기존 Flask 기반의 웹 페이지를 Next.js로 마이그레이션하고 콘텐츠를 업데이트하여, 더 빠르고 사용자 친화적인 웹 페이지를 제작했습니다. 또한, Tailwind CSS를 도입하여 디자인 시스템을 구축했습니다.

서버리스 환경

기존 Flask 기반 서버에서 겪었던 서버 유지보수에 대한 피로감을 덜고자 배포 환경을 Cloudflare Pages로 이주했습니다. 이를 통해 배포 자동화와 배포 롤백, 무중단 배포 등의 기능을 손쉽게 사용할 수 있게 되었으며, Cloudflare의 글로벌 네트워크를 활용하여 빠른 페이지 로딩 속도를 제공받을 수 있었습니다. 단, 방명록 서버는 기존의 Flask 서버에서 프론트엔드를 제거하고 API 서버로 전환하여 운영 중에 있습니다.

참여 범위

• 웹 사이트 제작(이미지 및 텍스트 제외) 및 배포

기술 스택

• 프론트엔드: Next.js, React, Tailwind CSS
• 서버리스 플랫폼: Cloudflare Pages
• 방명록 백엔드: Flask, Docker

링크

https://grnplnt.life

프로젝트 소개

이스트소프트 프론트엔드 부트캠프 오르미 2기의 JavaScript 프로젝트인 '호두샵' 오픈마켓 서비스입니다.

SPA(Single Page Application)로 제작하였으며, 필수 과제(구매자 페이지)와 도전 과제(판매자 페이지)를 포함하여 호두샵 백엔드 서버에서 제공하는 API를 모두 활용해서 실제 서비스되는 오픈 마켓 웹 페이지에 가깝게 구현하고자 하였습니다. 사용자 경험과 접근성 향상 또한 주요 목표로 삼아, 다양한 디바이스 환경에서도 일관된 경험을 제공하도록 노력했습니다.

구현 기능

• 상품 목록 조회
• 상품 상세 조회
• 장바구니 조회
• 상품 구매
• 상품 검색
• 상품 등록, 수정, 삭제

기능 상세

1. SPA 라우터

웹 페이지의 라우터를 바닐라 JavaScript로 구현했습니다. 웹 페이지의 경로에 따라 pages/(페이지).js를 렌더링합니다. 브라우저의 뒤로 가기, 앞으로 가기 버튼을 클릭하거나 주소를 직접 입력하여 페이지를 이동할 수 있습니다.

2. 로그인 상태

LocalStorage와 SessionStorage에 사용자 정보와 토큰을 저장하되, 액세스 토큰과 리프레시 토큰은 CryptoJS를 사용해서 암호화하여 저장합니다. 암호화에 사용되는 키는 FingerprintJS를 활용했습니다. 사용자 정보와 토큰을 저장하고 있는지 확인하여 로그인 상태를 판단합니다.

3. 우편번호 검색

우편번호 검색 API는 카카오의 주소 검색 API를 이용합니다. 상품 주문 페이지에서 우편번호 검색 버튼을 클릭하면 주소 검색 모달이 표시됩니다. 모달에서 주소를 검색하고 검색 결과를 선택하면 주문 페이지의 주소 입력 폼에 삽입됩니다.

4. 반응형 웹 디자인

미디어 쿼리를 사용하여 다양한 뷰포트 너비에 대응하는 반응형 웹 디자인을 구현했습니다. 또한, 일정 뷰포트 미만일 경우 헤더의 검색 창을 최소화하여 뷰포트의 공간을 효율적으로 활용했습니다.

기술 스택

• 프론트엔드: HTML, Sass, 바닐라 JavaScript
• 배포 환경: Cloudflare Pages

링크

• https://open-market-project.jihun.io
• https://github.com/jihun-io/Open-Market-Project

프로젝트 소개

jihun의 사진 갤러리 홈페이지입니다.

기능

• 반응형 이미지를 사용하여 데이터 송수신과 로드 시간을 절약합니다.
• 목록에서 이미지를 클릭하면 확대된 이미지 모달을 볼 수 있으며, 모달 내에서 EXIF 데이터의 일부를 확인할 수 있습니다.

참여 범위

• 웹 사이트 제작 및 배포

기술 스택

• 프론트엔드: Next.js, Tailwind CSS
• 백엔드: Cloudflare Pages

링크

• https://gallery.jihun.io
• https://github.com/jihun-io/gallery

프로젝트 소개

jihun의 기술 블로그입니다. 프론트엔드 개발을 하면서 해결한 문제들이나 새롭게 배운 내용, 그리고 개인적인 경험들을 공유하고 있습니다.

참여 범위

• 웹 사이트 제작 및 배포

기술 스택

• 프론트엔드: Gatsby, React, Tailwind CSS
• 배포 환경: Cloudflare Pages

링크

https://blog.jihun.io

프로젝트 소개

명절마다 밈으로 유행하는 잔소리 가격표를 웹 애플리케이션으로 구현한 프로젝트입니다.

구매자는 판매자에게 전하고 싶은 잔소리를 선택하여 장바구니에 담은 후, 합계 금액을 판매자에게 카카오페이로 송금할 수 있습니다. 또한, 누구든지 카카오페이 링크를 입력하면 나만의 잔소리 키오스크 페이지를 만들 수 있습니다.

작동 원리

• 나만의 잔소리 키오스크를 생성하면 URL에 '이름'과 '카카오페이 송금 링크'가 각각 파라미터로 기록되어 생성됩니다.
• 나만의 잔소리 키오스크 링크에 접속하면 웹 페이지가 파라미터 값을 불러와서 이름과 카카오페이 송금 링크를 제공합니다.

중점 사항

나만의 잔소리 키오스크를 만들기 위해서는 '이름' 데이터와 '카카오페이 송금 링크' 데이터가 필요합니다. 그렇지만 이 데이터를 수집하여 서버에 저장하는 것은 다소 민감할 수 있으며, 데이터베이스를 사용할 만큼의 큰 데이터도 아니라고 판단했습니다. 그렇기 때문에 서버리스 컴퓨팅(Cloudflare Pages)을 선택하였고, 필요한 데이터는 URL의 파라미터에 데이터를 기록하여 처리했습니다.

잔소리 키오스크에서 잔소리를 결제할 때의 경험을 다소 고민했습니다. 카카오페이 송금 버튼을 누른 후에 사용자가 합계 금액을 입력하는 것은 번거로울 뿐만 아니라 좋은 경험이 아니라고 생각했습니다. 잔소리 키오스크 개발 직전에 자료를 조사하면서 이를 해결할 수 있는 방법을 찾았습니다. 송금 링크 뒤에 오는 특정 문자열이 송금 화면의 기본 금액 값을 결정한다는 것이었습니다. 이 덕분에 잔소리 키오스크에서 송금하기 버튼을 눌렀을 때, 장바구니에 담은 잔소리의 합계 금액을 카카오페이 송금 화면의 기본 값으로 적용할 수 있었습니다.

참여 범위

• 웹 사이트 제작 및 배포

기술 스택

• 프론트엔드: Next.js, Tailwind CSS
• 백엔드: Cloudflare Pages

링크

• https://jansori.jihun.io
• https://github.com/jihun-io/Jansori

프로젝트 소개

단편영화 ⟨혹성의 아이⟩(2024)의 소개 및 홍보, 제작진 및 배우 모집을 위한 웹 페이지입니다.

어떠한 환경에서 접속하더라도 동일한 경험을 주기 위해 반응형 웹 디자인을 적용했으며, 다크 모드를 대응합니다. 또한, 커뮤니케이션을 위해 방명록 기능을 추가했습니다.

문제 해결 사례

웹 페이지 공개 몇 시간 전, 페이지에 추가한 웹 폰트 중 일부가 정상적으로 표시되지 않았었습니다. 확인해 본 결과 웹 폰트의 CDN인 jsDelivr 서버가 인증서 갱신을 하지 않아 접속이 되지 않는다는 것을 파악했고, 임시로 웹 폰트 파일을 서버에 직접 탑재해 문제를 해결했습니다.

또한 웹 페이지를 4개월 이상 운영한 결과, 방명록 페이지에 스팸 게시글이 올라오는 문제가 발생하기 시작했습니다. 이를 방지하기 위해 방명록 페이지에 캡차를 적용했습니다. 캡차 솔루션은 Cloudflare Turnstile을 채택했습니다.

참여 범위

• 웹 사이트 제작(이미지 및 텍스트 제외) 및 배포

기술 스택

• 프론트엔드: HTML, CSS, JavaScript
• 백엔드: Flask, Microsoft Azure, Cloudflare

링크

• https://old.grnplnt.life

프로젝트 소개

디지털 도어록 잠금 해제 웹 앱 DoorOpener의 Android 앱입니다.

Android 환경에서의 DoorOpener 사용자 경험을 개선하기 위해 React Native를 활용하여 앱을 개발했습니다.

문제 해결 사례

처음에는 Expo를 이용해서 앱을 개발했습니다. 개발 디바이스에서 미리 보기가 간단하고, 앱을 쉽게 퍼블리싱할 수 있다는 장점이 매력적으로 다가왔습니다. 하지만 푸시 알림 기능을 구현할 때 앱 프로젝트의 네이티브 코틀린 코드를 작성해야 했었고, 이를 위해 eject를 하여 바닐라 React Native로 전환해서 나머지 기능들을 구현했습니다.

주요 기능

• 밀어서 잠금 해제 인터페이스
• 잠금 해제 기록 열람
• 푸시 알림 수신

기술 스택

• React Native
• Kotlin
• Firebase

GitHub

https://github.com/jihun-io/dooropener_android

프로젝트 소개

디지털 도어록 잠금 해제 웹 앱 DoorOpener의 iOS 네이티브 앱입니다.

iPhone 환경에서의 DoorOpener 사용자 경험을 개선하기 위해 SwiftUI로 네이티브 앱을 개발했습니다.

문제 해결 사례

iPhone에서 앱 실행 시 의도하지 않은 터치로 잠금이 해제되는 것을 막기 위해 '밀어서 잠금 해제' 기능을 구현했습니다. 이때 더 나은 사용자 경험을 제공하기 위해 많은 고민을 했습니다. 이를 위해 슬라이더를 끝까지 밀어서 터치를 해제하는 경우가 아닌, 일정 가속도 이상으로 스와이프하지만 슬라이더가 끝에 도달하지 않는 경우에도 잠금이 해제되도록 설계했으며, 특히 이 경우 슬라이더가 맨 끝까지 도달하는 시간에 비례하여 문 열림 뷰의 표시 시간에 딜레이를 주었습니다.

또한, Apple Watch에서 DoorOpener의 로그인 기능을 구현하기 위해 백엔드 서버에서 Apple Watch 로그인을 위한 인증 토큰을 부여하는 방식으로 로그인 프로세스를 처리했습니다.

주요 기능

• 밀어서 잠금 해제 인터페이스
• 잠금 해제 기록 열람
• 푸시 알림 수신
• URL Scheme을 이용한 단축어 앱 지원
• Apple Watch로 잠금 해제
• 다크 모드 지원

기술 스택

• Swift
• SwiftUI
• APNs(Apple Push Notification service)

GitHub

https://github.com/jihun-io/dooropener_ios

프로젝트 소개

현관문의 디지털 도어록을 휴대전화만로 간편하게 해제하는 웹 애플리케이션입니다.

NFC 기능을 자유롭게 쓸 수 있는 안드로이드에서는 이미 NFC를 카드 키처럼 이용해 도어록의 잠금을 해제할 수 있지만, NFC 쓰기 API가 제한되어 있는 iPhone으로는 NFC만으로 도어록을 열 수 없다는 문제를 해결하고 싶었습니다.

집의 현관문 잠금을 직접 제어하는 만큼 보안을 중점적으로 개발했습니다. 보안을 위해 사용자 초대 및 가입, 관리 기능이 제공되며, 모든 비밀번호는 해시와 솔트로 암호화되어 저장됩니다.

작동 원리

집에 구축한 라즈베리 파이 서버에 잠금 해제 트래픽을 보내면 서버가 도어록의 무선 송수신기를 GPIO 핀으로 제어하여 잠금이 해제됩니다.

기능

• 잠금 해제
• 사용자 초대 및 관리
• 잠금 해제 기록 열람
• 임시 키 발급
• iOS 및 Android 앱으로 푸시 알림 전송

기술 스택

• 프론트엔드: HTML, CSS, JavaScript
• 백엔드: Flask, Raspberry Pi, Cloudflare

GitHub

https://github.com/jihun-io/dooropener