김예빈의 포트폴리오

부소마고에서 2학년이 되면 모두가 전공동아리를 진행하게 됩니다. ‘내가 해야 한다’라는 사실은 알지만 ‘어떻게’ 해야 하는지는 진행을 하는 방법은 알지 못한 채로 2학년을 올라오게 됩니다. 그래서 저는 1학년들의 걱정을 덜어주고, 이제 막 2학년이 되어 전공동아리를 이끌어가야 하는 학생들에게 든든한 길잡이가 되어줄 수 있는 매개체가 필요하다고 생각했습니다.

또한, 전공동아리뿐 아니라 1학년 네트워크 프로젝트도 필요한 물품을 구글 시트를 통해서 신청합니다. 하지만 구글 시트는 모두가 동시에 접속할 수 있기 때문에 본인이 쓴 물품이 덮어씌워 질 수도 있고, 선생님께서 말씀하신 것과 다른 링크를 제출해도 따로 막을 수 없다는 불편함이 있습니다. 학생과 교사, 모두 편리하게 물품 신청 및 관리할 수 있으면 좋겠다고 생각했습니다.

Contribution

<aside>

ㅇ.png

전체적인 퍼블리싱

사용자가 이용하는 서비스의 전체적인 UI 구현을 담당하였습니다. 더불어 추가적으로 수정이 필요한 부분은 즉각적으로 수정하였습니다.

사용자 입장에서 직관적이고 편리한 화면 구성을 위해 레이아웃 구조를 세심하게 설계하고, 반응형 디자인을 적용하여 다양한 환경에서도 일관된 사용 경험을 제공하도록 구현했습니다. 또한, 다양한 React hook 을 활용해 상태 관리를 효율적으로 처리하고, 컴포넌트를 세분화 및 모듈화 하여 유지보수성과 재사용성을 높였습니다.

디자인

퍼블리싱과 마찬가지로 디자인 전체를 담당하였습니다.

이 과정에서 서비스의 전반적인 플로우 차트를 직접 구성하며, 화면 간의 흐름과 사용자 동선을 체계적으로 설계하는 방법을 배웠습니다. 또한, 사용자의 입장에서 UI·UX를 고민하며 디자인을 진행하여, 단순히 보기 좋은 화면이 아니라 실제로 사용하기 편한 인터페이스를 구현할 수 있었습니다. 이때 프론트엔드와 백엔드의 의견을 반영하여 더 완성도 있는 디자인을 완성할 수 있었습니다.

공지사항 API 연동

부여된 권한에 상관 없이 누구나 공지를 조회할 수 있도록 개발하였습니다.

이 과정에서 요청 처리를 효율화하기 위해 customAxios를 직접 생성하여 적용해 보았습니다. 또한 공지사항 데이터를 표시하는 과정에서 <h1></h1> 등 HTML 태그가 실제 화면에서도 텍스트 그대로 노출되도록 렌더링 로직을 커스터마이징하였습니다.

</aside>

Experience

실제 서비스에 사용할 디자인 구성
협업 경험
서비스 실사용 경험

TroubleShooting

<aside>

</aside>

Reflections

“물듬” 프로젝트를 통해 디자인부터 프론트엔드, 백엔드까지 직접 경험해보며 서비스가 완성되어 가는 전 과정을 이해할 수 있는 뜻깊은 시간이었습니다.

특히, 팀원들과의 협업 과정에서 맡은 기능을 구현하고 피드백을 주고받으며, 코드의 문제점을 함께 찾아 개선해 나가는 과정의 중요성을 깊이 느꼈습니다.

또한, 테스트 과정에서 예상치 못한 오류와 부족한 부분을 발견하고 이를 보완해 나가며 문제 해결 능력과 개발 역량을 한층 더 성장시킬 수 있었습니다.

이번 프로젝트는 저에게 기본적인 개발 역량과 시스템 분석 능력을 키워준 경험이자, 앞으로 더 나은 개발자로 성장하기 위한 탄탄한 밑거름이 되었습니다.

사용자를 위한 인터페이스를 만드는

🏃‍♀️ Activity & Career

⚒️ Skills

Main project

Introduce