미리보기

울산 하늘공원 장례식장 반응형 홈페이지 외주 개발

장례식장 기본 정보들과 빈소 현황을, 49재 계산을 제공하는 모바일/데스크탑 뷰 반응형 웹페이지를 개발했습니다. 배너, 공지사항 내용을 수정할 수 있는 관리자 페이지도 제작했으며, 해당 웹페이지는 공식 홈페이지로 사용됩니다.

• 담당한 역할 : 장례용품, 제례상(49상, 기제사), 승화원, 예법, 탑바, 사이드바, 관리자 페이지 개발

• 인원 : 프론트엔드 4명, 백엔드 1명, 디자이너 1명, PM 1명 (총 6명)

• 기술 : TypeScript React SCSS module react-calendar

• 링크 : https://ulsanskypark.com/

• 노력 및 기여한 부분

  • 49재 계산 달력 커스텀 및 사용자 경험 개선

    • 캘린더의 UI를 디자인과 일치시키기 위해 라이브러리의 CSS클래스를 직접 수정

    • 날짜를 입력해서 계산하는 로직에서 날짜 클릭 시 바로 계산되도록 기능을 개선하여 사용자 편의성 증대

  • 반응형 웹 구현 및 웹 표준을 고려한 개발

    • Media Query를 활용해 px를 기반으로 한 휴대폰, 모니터 기준 반응형 웹 구현

    • 모바일 UI를 고려해 CSS의 Flex를 주로 활용하고, 각 섹션 간격 관리에 gap 속성을 적용

    • 시멘틱 태그 사용으로 웹 표준을 준수하고, 접근성과 가독성 개선

  • 유지보수성을 고려한 메뉴 설계 및 구현

    • 26개 이상의 메뉴를 가진 사이드바/탑바를 소프트 코딩하여 관리

    • 메뉴 아이템에 Sub Menu를 추가하고, 객체 배열로 나타내어 ul/li 구조를 설계

    • 데이터만 수정하면 메뉴를 쉽게 추가/삭제할 수 있는 유연한 구조를 설계

• 성과

  • 반응형 웹 및 웹 표준을 준수한 UI 개발을 통해 모바일과 데스크탑 해상도에서 적절하게 표시되는 홈페이지 구현

  • 캘린더 기능 개선 후, 하늘공원 관계자 분들로부터 사용하기 편리하다는 반응을 얻음

O-RAN RICS 관리 대시보드 2.0 개발

ETRI 내부에서 RIC 데이터를 실시간으로 모니터링할 수 있는 통합 대시보드를 개발했습니다. Time Sequence Diagram 페이지, 실시간 로그를 확인하는 페이지, 동적으로 E2Nodes 구조 및 상태를 나타내는 페이지 등을 개발했습니다. 또한 O-RAN RICS 1.0 프로젝트의 대시보드를 유지보수 했습니다.

• 담당한 역할 : 전체 페이지 개발 및 FIGMA 디자인 진행

• 인원 : 프론트엔드 1명, 백엔드 1명 (총 2명)

• 기술 : React TypeScript SCSS axios Tanstack-query Zustand FIGMA Recharts React Flow mermaid react-gauge-component html2canvas react-csv react-slick react-kakao-maps-sdk

• 노력 및 기여한 부분

  • 사용자 편의성을 고려한 개발

    • 지도 커스터마이징 작업에서, 사용자가 원래 위치로 쉽게 돌아갈 수 있도록 버튼을 추가

    • Time Sequence Diagram 페이지에서, mermaid 데이터가 업데이트될 때마다 스크롤이 제일 위로 초기화되는 불편함이 발생하여, 스크롤 위치를 고정하는 기능 추가

  • Diagnostic Monitor 페이지에서 보고 싶은 로그 선택 및 필터링 기능 구현

    • 해당 페이지의 Props Depth가 3 이상으로 깊어지는 구조에서 상태 관리가 복잡했고, 필터링을 위한 비교 로직이 필요한 상황

    • Zustand을 도입하여 상태 관리를 개선했고, 2차원 배열로 로그 선택 체크박스 데이터를 매핑

    → 선택된 Display Mode와 서비스 상태에 맞춰 데이터 필터링 및 렌더링 시스템을 구축하며, 전역 상태 관리의 활용 시점과 방법을 이해하게 됨

  • 지도의 셀 시각화를 위한 커스텀 오버레이 제작

    • 사용한 지도 라이브러리는 각도가 있는 타원을 지원하지 않아 SVG 기반 커스텀 기능을 직접 구현해야 하는 상황

    • 지도 레벨에 맞춰 타원 비율을 유지하고, Power값에 따라 셀의 크기를 조절하기 위해 비율 계산과 크기 조절 로직을 구현

    • CSS로 셀 중심점을 설정하여 타원 회전 진행

    → 라이브러리에 의존하지 않고 커스텀 기능을 직접 개발하며 문제 해결 능력 증진

• 성과

  • 2024 전파산업대전 LG유플러스 ETRI 부스 ‘ERIC’ 전시

  • O-RAN PlugFestFall2024에서 성공적으로 시연

  • 2024 한국통신학회 추계종합학술발표회 O-RAN 특별 세션 ‘O-RAN RIC 기술’ 발표 자료

  • ETRI 부서에서 모니터링 도구로 지속적으로 사용

  • 2024.12. ETRI 부서 내부 심사 발표 자료로 사용 및 시연

O-RAN RICS 관리 대시보드 1.0 개발

오픈랜 환경에서 실시간 RIC 블록 관리 및 상태 조회, 기지국 및 단말 데이터 시각화 등 O-RAN 인터페이스 관리 프로그램 웹 대시보드를 개발했습니다. 로그인 기능 및 알림 조회 기능도 부가적으로 개발했습니다.

• 담당한 역할 : 전체 페이지 개발 및 디자인, 기존 틀에서 추가 기획

• 인원 : 프론트엔드 1명, 백엔드 1명 (총 2명)

• 기술 : TypeScript React SCSS module react-kakao-maps-sdk Recharts Tanstack-query axios Zustand FIGMA

• 노력 및 기여한 부분

  • 소프트 코딩 지향 및 컴포넌트 재사용

    • 기능별 컴포넌트 분리를 통해 재사용 가능한 컴포넌트 구조로 개발하여 유지보수성 향상

  • UI 디자인 개선

    • 50개 이상의 UI 예시 자료를 참고하여 실제 서비스 화면처럼 UI를 구성

  • 실시간 데이터 흐름을 나타내는 큐 로직 구현

    • reCharts 라이브러리를 사용하여 실시간 데이터 흐름을 표현하기 위해 배열을 활용한 선입선출 큐 형태로 데이터 관리

  • 백엔드 API 설계 협업

    • REST API 설계 에서 요청 방식, 데이터 형식, 엔드포인트 등을 백엔드 팀원분과 협의하여 프론트엔드에서 직관적으로 처리할 수 있는 구조로 구현 (알림, rApp, Framwork 페이지 등)

    → REST API와 백엔드 시스템 이해의 중요성을 체감

• 성과

  • ICTC 2024 15th 논문 게재 (제 1저자) <Open RAN visualization framework for rApp development>

오픈랜 시스템에서의 에너지 절감 rApp 시각화 대시보드 개발

실시간 기지국, 단말 데이터 시각화 및 기지국과 AI 기능 on/off 제어기능이 포함된 웹 대시보드를 개발했습니다.

• 담당한 역할 : 전체 페이지 개발 및 디자인, 기존 틀에서 추가 기획

• 인원 : 프론트엔드 1명, 백엔드 1명 (총 2명)

• 기술 : JavaScript React.js Axios SCSS react-kakao-maps-sdk reCharts styled-components canvas FIGMA

• 노력 및 기여한 부분

  • reCharts 라이브러리 선정 이유

    • 차트 시각화 및 커스텀과 상세한 공식 문서를 통한 빠른 개발이 가능하기 때문에 선정

  • 재사용 가능한 차트 컴포넌트 제작

    • 다양한 차트 유형을 쉽게 사용하도록 컴포넌트를 분리하여 시각화 시간 단축

    • 기본 차트 컴포넌트를 만들고, 한 번에 type만 지정하면 쓸 수 있는 ‘Charts’ 컴포넌트를 제작해서 재사용성을 높여 차트 시각화 코드 작성 시간을 절약

  • 초기에 사용자에게 ‘무슨 기능을 하는지 모르겠다’는 피드백을 받아, 사용자 경험을 토대로 재설계

    • 사용자가 설정 흐름을 한눈에 쉽게 이해하도록 쉽게 설정하도록 설계

    • 입력패널에서, 많은 레퍼런스를 참고하고 디자인을 5번 이상 수정하고 피드백을 받으며 UI를 개선

    • 또한 전체 기지국, 개별 기지국(1~6번)을 조회하는 페이지를 따로 나눠야 하는 상황(총 7페이지)에서 드롭다운 메뉴로 페이지를 선택해서 화면 이동 없이 각 페이지를 조회할 수 있게 의견을 제시해 채택됨

    → 한눈에 대시보드 기능과 입력 패널 사용 방법을 이해할 수 있게 됐으며, 해당 경험으로 앞으로의 프로젝트도 UX를 중요시하게 됨

  • 단말, 기지국 위치를 동적으로 표시한 ETRI 내부 지도 이미지 비율이 웹의 크기가 변해도 유지되도록 하기 위한 노력

    • Kakao 지도 API의 커스텀 타일 셋 기능을 이용해서 만들려고 했으나, 따로 타일셋 이미지를 제작해야 했기에 다른 방법을 조사

    • canvas를 활용해 이미지 위에 단말, 기지국을 올려놓고, 기준 좌표(54.5x27)를 설정한 다음 css로 16:9 지도 비율로 설정해 이미지 크기가 변해도 단말과 기지국의 위치가 변하지 않게 나타냄.

    → 라이브러리에 의존하지 않고 직접 기능을 개발할 수 있는 점도 중요하다는 것을 알게 됨.

• 성과

  • JCCI 2024 34th 논문 게재, 제 2저자, <오픈랜 시스템에서 에너지 절감 rApp 시각화 프론트엔드 개발>

나와 잘 맞는 IT 직업/유명인 MBTI 테스트

12개의 질문을 통해 IT 관련 직업 및 유명인의 MBTI를 진단하는 웹 서비스를 개발하여 울산대학교 IT융합전공 홍보 부스에서 WEB 소개 부스로 운영했습니다.

• 담당한 역할 : 디자인, 기획, 개발 모두 진행

• 인원 : 개인 프로젝트

• 기술 : JavaScript React.js SCSS OpenGraph github pages FIGMA

• 링크

  • 깃허브 : (클릭시) 깃허브 링크 바로가기

  • 배포 홈페이지 : https://ji-ny.github.io/mbti_test_ulsan/

• 노력 및 기여한 부분

  • 자연스러운 모바일 뷰를 위한 CSS 효과

    • 유동적인 레이아웃을 활용하여 미디어 쿼리 없이 반응형 웹을 제작. %, max-width 등으로 사이즈를 조정하여 다양한 기기에서 자연스럽게 보이도록 디자인

  • 사용자라면 어떤 기능이 필요할지 고민

    • ‘다시 하기’, ‘공유하기’ 버튼을 추가하여 SNS 공유 기능을 구현

    • CSS 애니메이션과 프로그레스 바를 사용하여 사용자가 각 문제를 넘어갈 때 자연스럽게 인식할 수 있도록 제작

  • 개발 과정 및 코드 리뷰 블로그 게시글 작성

    • ‘React MBTI 테스트 만들기’ 시리즈로 개발 과정을 블로그에 기록하고, 코드 리뷰를 진행하여 문제 해결 및 개발 경험을 공유

  • OpenGraph 메타 데이터 설정

    • SNS 공유 시 미리보기 이미지와 제목, 설명글, 파비콘 등 메타 정보를 표시하기 위해 활용

• 성과

  • 울산광역시 청소년 활동 페스타에서 부스 운영을 통해 약 197명 이상의 사용자가 웹 서비스를 체험.

  • 사용자가 MBTI 결과를 보며 긍정적이고 재미있어하는 반응을 보임.

  • 모바일 환경에서도 매끄럽게 작동하는 반응형 디자인으로 사용자 만족도를 높임.

시니어 구인구직 반응형 웹 서비스

시니어 맞춤 채용 정보, 취업 지원 정보 등을 제공하여 시니어가 손쉽게 일자리를 구할 수 있도록 도와드리는 반응형 웹 서비스입니다.

• 담당한 역할 : 아이디 찾기, 비밀번호 찾기, 내 정보, 취업 지원, 채용 정보, 상세 페이지 개발

• 인원 : 프론트엔드 4명, 백엔드 2명, PM 1명, 디자이너 1명 (총 8명)

• 기술 : JavaScript React.js CSS Axios

• 링크

  • 깃허브 : (클릭 시) 깃허브 링크 바로가기

  • 배포 링크 : https://odar.netlify.app/

• 노력 및 기여한 부분

  • 첫 웹 프로젝트 완성을 위해 3개 이상의 강의를 참고하고 React의 상태관리부터 백엔드 요청까지 학습

  • 팀원들과 자료를 공유하고, 빠른 소통

    • 같은 프론트엔드 팀원들과는 Axios 사용법을 Notion에 정리하여 공유

    • 백엔드 팀원들과는 빠르게 소통하여 API 연동을 원활하게 진행

    • 다른 파트의 팀원들에게도 필요한 부분을 질문하고 피드백을 받아 빠르게 문제 해결

  • ‘아이디(이메일) 찾기’ API에서, axios GET 요청 시 Request body를 보내야 하는 상황 해결

    • HTTP 표준의 RESTful API 설계 원칙에 따라 GET 요청에서 request body를 포함하는 것은 권장되지 않는 것을 확인

    • 백엔드 팀과 소통 후 POST로 API를 변경하여 문제를 해결

    → 간 원활한 소통과 피드백을 주고받는 것이 문제 해결에 중요한 역할을 하는 점을 깨달음.

  • CSS 클래스가 적용되지 않는 사례 해결

    • ‘아이디 찾기’ 페이지 개발 시, 버튼 색을 CSS로 지정해 줬는데도 바뀌지 않는 문제 발생

    • 다른 css 파일과 클래스 이름이 충돌하여 발생한 문제로 className을 수정

    → CSS Module을 사용하거나, className 명명 규칙을 철저히 신경 써야 한다는 점을 깨달음 .

• 성과

  • UMC 4th DEMODAY에서 서비스 발표 및 부스 운영

  • 서비스를 체험한 사용자에게 프론트엔드 개발에 대한 칭찬을 받으며 높은 완성도를 인정받음

• 울산 청년들을 위한 맞춤형 알림, 특화 챗봇 앱 서비스 ‘U-ni’ 제안, 5인 팀

• 디자인 및 기획 역할

• 전국 연합 IT 웹/앱 동아리 UMC

  • 4기 WEB 수료

  • 5기 SpringBoot 수료

• UMC 4기 WEB 스터디 [우수상] 획득

• 초등학교 AI 교육봉사, 5인 중 팀장

• 개발자님 인터뷰/보고서 발표, 4인팀

• 초중고 학생 수업 (Python, C, html 등) (2022. ~ 2024.)

• 총무 및 홍보부장, 프론트엔드 스터디 진행 (2021. ~ 2023.)

• 리눅스, C언어 백준 스터디 진행, 3인 중 팀장