사용자를 고객으로

실전형 프론트엔드

고객에게 쉽고 믿을 수 있는 웹 경험, 어떻게 만들까?

안녕하세요.

소프트웨어를 쉽고 빠르게 만들기 위해 도구를 즐겨 활용하는 석지인입니다(TypeScript, Next.js, TailwindCSS, Shadcn/ui, JetBrain Junie(AI) 등). 저 역시 복잡한 기술도 쉽게 이용할 수 있는 프론트엔드로 사용자의 문제를 풀고 싶습니다.

프론트엔드는 비즈니스 가치를 보여줌으로써 사용자를 고객으로 만듭니다. 방법에 얽매이지 않고 사용자를 고객으로 만드는 프론트엔드를 위해 노력하겠습니다.

코드 스니펫

TypeScript와 Next.js로 어떤 문제를 해결하셨습니까?
타입 안정성과 서버 사이드 렌더링을 통해 사용자 경험과 개발 생산성을 향상시켰습니다.
// Example TypeScript code
              type User = {
                id: string;
                name: string;
                email: string;
              };

              const fetchUser = async (id: string): Promise<User> => {
                const response = await fetch(`/api/users/${id}`);
                return response.json();
              }

프로젝트 살펴보기

제가 진행한 주요 프로젝트들을 확인해보세요

저는 이런 사람이에요

프로젝트

제가 참여한 주요 프로젝트들을 소개합니다

넥스카 - 자동차 관리 플랫폼

넥스카 - 자동차 관리 플랫폼

넥스카 자동차 관리 플랫폼 대시보드 화면
넥스카 자동차 관리 플랫폼 대시보드 화면

차량 관리, 정비 예약, 부품 구매를 위한 원스톱 솔루션. 사용자 친화적인 인터페이스와 실시간 알림 기능을 갖추고 있습니다. React, TypeScript, Redux, Styled Components, Firebase를 활용하여 개발했습니다.

포트폴리오 웹사이트

포트폴리오 웹사이트

포트폴리오 웹사이트 홈페이지
포트폴리오 웹사이트 홈페이지

개인 포트폴리오 웹사이트로, 프로젝트 쇼케이스, 기술 스택, 경력 정보를 담고 있습니다. Next.js, TypeScript, Tailwind CSS를 활용하여 반응형 디자인과 모던 UI/UX를 구현했습니다. 다크 모드 지원과 성능 최적화에 중점을 두었습니다.

스마트 홈 대시보드

스마트 홈 대시보드

스마트 홈 대시보드 인터페이스
스마트 홈 대시보드 인터페이스

IoT 기기를 모니터링하고 제어하기 위한 웹 애플리케이션입니다. 실시간 데이터 시각화와 자동화 기능을 제공합니다. React, D3.js, Socket.io, Material UI, Node.js를 활용하여 개발했으며, 에너지 사용량 모니터링과 기기 제어 기능을 구현했습니다.

기술 스택

제가 사용하는 주요 기술과 도구들

JavaScript (ES6+)
JavaScript (ES6+)

동적인 프론트엔드 개발을 위해 ES6+ 이상의 최신 EcmaScript를 사용했습니다. CommonJS와 ESM을 사용하는 설정 파일을 다룰 수 있습니다.

React.js
React.js

리액트 동작 원리의 하이드레이션을 조절하기 위해 여러 훅을 사용했습니다. 라이브러리 코드로 TypeScript와의 조합 원리를 파악했습니다.

Next.js
Next.js

서버를 공격으로부터 보호하기 위해 next api를 프록시로, next auth 세션을 인증방법으로 사용해 민감정보의 브라우저 노출을 피했습니다. SEO 등 최적화를 위해 서버사이드 렌더링과 정적 사이트 생성, 앱 라우터의 레이아웃을 활용했습니다.

HTML5 / CSS3
HTML5 / CSS3

마크업 태그를 이용한 LCP 단축, 스크립트 로드 조절, 무한 스크롤 요소 선택 등으로 활용했습니다.

프론트엔드

TypeScript95%
React90%
Next.js85%
Tailwind CSS90%
Redux80%
React Query85%

UX를 위한 프론트엔드 설계

사용자 경험을 위한 프론트엔드 개발 측면의 설계 & 실험을 담고 있습니다.

📝

구조화된 설계

요약, 구조도, 설명, 코드 예시, 핵심 코드 깃허브 링크를 통해 문제 해결 과정을 확인하실 수 있습니다.

🧩

컴포넌트 설계

재사용 가능한 컴포넌트로 일관된 사용자 경험과 개발 효율성을 높였습니다.

🔄

상태 관리

복잡한 상태 로직을 관리하기 위한 패턴과 라이브러리 활용 방법을 설명합니다.

성능 최적화

빠른 로딩 시간과 부드러운 상호작용을 위한 최적화 기법을 적용했습니다.

접근성

모든 사용자가 콘텐츠에 접근할 수 있도록 WCAG 지침을 준수했습니다.

🧪

반응형 디자인

모든 기기에서 최적의 사용자 경험을 제공하는 반응형 레이아웃을 구현했습니다.

자주 묻는 질문

궁금한 점이 있으신가요? 아래에서 답변을 확인하세요

함께 일해요

새로운 프로젝트나 채용 기회가 있으신가요? 언제든지 연락주세요!

또는 이메일로 연락하기: contact@jiinseok.com

소식 구독하기

새로운 프로젝트와 포트폴리오 업데이트 소식을 받아보세요.