전체 글 63

어쩌다보니 1년 : 사이드 프로젝트 회고록

UMC 5기 프로젝트 이후, 마음이 잘 맞았던 몇몇 팀원들과 함께 사이드 프로젝트인 '투유'를 시작했다. 모두가 적극적으로 의견을 낸 기획 과정부터 디자인, 개발, QA, 그리고 플레이스토어 런칭까지, 정말 꾸준하게 달려온 프로젝트다. 현재는 iOS 팀원들이 새롭게 합류하면서 안드로이드 서비스 운영과 함께 iOS 개발도 진행 중이다. 나는 아쉽게도 이제 팀을 떠나게 되었지만 1년 동안 정성들여 해온 프로젝트인 만큼, 짧게나마 회고를 남겨보려고 한다.1. PM으로서 그동안 팀을 어떻게 운영했는지? • 확실한 목표 설정과 동기부여사이드 프로젝트가 실패하는 가장 흔한 이유는 팀원마다 우선순위와 목표가 다르기 때문이라고 생각한다. 그래서 우리는 첫 회의에서 팀 전체의 방향성을 다음과 같이 정했다.사용자가 불편함..

회고 2025.04.12

[React] 오버레이 메뉴에서 이벤트 버블링 처리하기

• 오버레이 메뉴 구현 메인 화면에서 리스트 아이콘을 클릭하면 전체 메뉴가 화면 위에 오버레이 되는 기능을 구현했다. 이를 통해 사용자가 원하는 메뉴를 빠르게 탐색할 수 있도록 했다. • 기본 구조 오버레이 메뉴는 Header 컴포넌트에서 상태를 관리하고, 해당 상태를 Menu 컴포넌트에 props로 전달하여 열고 닫는 동작을 제어하는 방식으로 구현했다. Header.jsximport { useState, useEffect } from 'react';import { useLocation } from 'react-router-dom';const Header = () => { const location = useLocation(); const [isOpen, setIsOpen] = useState(fal..

Dev/React 2025.04.07

엔비디아 RTX AI PC 캠퍼스 세미나 후기

• 엔비디아 RTX AI PC 캠퍼스 세미나 원래라면 개강 후 바쁘게 학교 생활을 하고 있었겠지만, 휴학 중이라 여유로운 일상을 보내고 있었다. 그러던 중, 학과 공지사항을 통해 엔비디아 캠퍼스 세미나를 진행한다는 소식을 접했다. 사실 현재 내 주요 관심 분야는 AI가 아니라서 그런지, 부끄럽게도 전공자임에도 불구하고 엔비디아가 어떤 기술을 다루는 회사인지 정확히 알지 못하고 미국 주식 종목 중 하나 정도로만 알고 있었다. 그래서 이번 기회에 배경지식도 넓히고, 평소 접하지 않았던 영역에 대해 직접 들어보는 것도 좋을 것 같아 세미나에 참여해보았다. 아래는 세미나를 들으며 정리한 내용이다. (+이해를 위해 추가한 내용도 있다.)1. NVIDIA는 어떤 회사일까? NVIDIA(엔비디아)는 1933년에 설립..

IT 트랜드 2025.03.25

[React] URL 파라미터로 검색 기능 만들기

• 검색 기능 사용자가 기사 제목을 검색하면, 해당 기사가 존재하는 경우 결과를 표시하는 검색 기능을 구현해보았다. 1. 검색어 입력 처리 우선, 검색어를 저장할 수 있는 search 상태를 생성하고 입력값이 변경될 때 이를 감지하는 onChangeSearch 함수를 만들었다.const [search, setSearch] = useState("");// 검색어 입력 처리 함수const onChangeSearch = (e) => {    setSearch(e.target.value);}; 2. 검색 페이지로 이동하기 다음으로 버튼 클릭 시 search 상태를 기반으로 검색 페이지로 이동하는 handleSearchClick 함수를 만들었다.// 검색 버튼 클릭 시 처리 함수const handleSearchC..

Dev/React 2025.03.09

[React] 객체 기반 폼으로 데이터 입력 처리하기

1. 기사 등록하기 기능 사용자가 입력한 데이터를 기반으로 새로운 기사를 추가하는 기능을 구현해야 했다. • 입력값을 관리하는 State 설정 먼저 사용자가 입력한 값을 저장하고 관리할 State가 필요하다. 여러 개의 입력값을 하나의 State에서 효율적으로 관리하기 위해서는 객체 형태의 데이터를 저장하도록 설정해야 한다.import { useState } from 'react';const Editor = ({}) => {    const [input, setInput] = useState({        createdDate: new Date(),        title: "",        reporter: "",        content: "",    }); • 날짜 입력값 처리 다음으로 날짜 ..

Dev/React 2025.03.04

[PM] 우당탕탕 플레이스토어 출시 여정기(2)

• 프로덕션 액세스 권한 부여 며칠 뒤, 앱에 프로덕션 액세스 권한이 부여되었다. 나는 프로덕션 권한이 부여되면 별도의 심사 과정 없이 바로 플레이스토어에 런칭될 것으로 예상했지만, 마지막 심사가 남아있었다. • 첫번째 리젝 : 테스트 계정 문제 첫번째 리젝 사유는 구글 측에 테스트용 게스트 계정을 제공하지 않았기 때문이었다.(아마 소셜 로그인을 사용하는 서비스들은 공통적으로 겪을 수밖에 없는 리젝 사유인 듯하다.) 테스트 계정을 제공한 후 다시 심사를 요청했지만, 또다시 리젝되었다. 원인은 정말 사소하게도 제공한 테스트 계정의 2단계 인증을 해제하지 않아서 발생한 것이었다. 2단계 인증을 해제한 후 다시 심사를 요청했고, 얼마 지나지 않아 로그인을 했다는 알림을 받았다. • 두번째 리젝 : 반응하지 않..

Product/PM 2025.02.27

[PM] 우당탕탕 플레이스토어 출시 여정기(1)

저는 '투유'라는 개발팀에서 PM으로 참여하고 있습니다. 이 글은 투유를 플레이스토어에 런칭하며 겪은 과정과 시행착오들을 정리한 글입니다 :) • 1차 개발 완료 드디어 길고 긴 개발 과정이 끝났다! 하지만 기쁨도 잠시, 더 큰 산이 기다리고 있었다. 바로 플레이스토어 심사 단계이다. 문제는 우리 팀 전원이 앱 출시 경험이 없다는 점이었다. 처음 해보는 과정인 만큼 걱정도 컸다. 특히 주변에서 심사에 탈락했다거나, 몇 주를 기다린 끝에 간신히 출시했다는 이야기를 많이 들어서 더욱 불안했다. 게다가 재작년부터 앱 심사 기준이 까다로워졌다는 소식까지 들리니 걱정은 배가 될 수밖에 없었다. • Google Play Console 비즈니스를 위한 Google Play | 앱 출시 및 수익 창출 | Googl..

Product/PM 2025.02.19

[React] Styled-Components 사용법

1. CSS-in-CSS vs CSS-in-JS  • CSS-in-CSSCSS를 별도의 .css 파일에 작성하고, HTML이나 React 컴포넌트에서 className이나 id로 연결한다.  • CSS-in-JSJavaScript 코드 안에서 CSS를 작성한다. 대표적으로 Styled-Components, Emotion 등이 있다. 2. Styled-Components Styled-Components는 CSS를 별도의 파일이 아니라, 컴포넌트 안에서 바로 작성한다. 그리고 특정 이름을 가진 컴포넌트를 생성해서 그 안에 스타일을 넣는다. 기존 HTML 파일           Styled-Components의 작성 방법은 다음과 같다.const 컴포넌트명 = styled.태그명`... 스타일 넣기 ...` ..

Dev/React 2025.01.03

2024 활동 정리 및 회고

전공 공부대학교 2학년 재학 2학년이 되면서 본격적으로 CS 과목들을 수강하기 시작했다. 나는 자유전공학부에서 올해 전공을 선택했기 때문에 어느 정도 어려움을 예상했지만, 생각보다 적응이 더 힘들었다. 특히 컴퓨터구조와 네트워크처럼 소프트웨어와 하드웨어의 경계에 있는 과목들은 수업 따라가기도 벅찼다. 결국 전공 성적이 부진했고, 재수강을 통해 만회할 계획이지만 아쉬움이 많이 남는다. 그래도 전공자로서 심도 있게 공부한 덕분에 전반적인 이해도는 확실히 높아졌다는 생각이 들었다. 교내 언론국 영자신문사활동기간: 2023년 3월 ~ 2024년 12월 1학년 때부터 꾸준히 이어온 활동이다. 영어와 글쓰기를 좋아해 시작했는데, 다양한 주제로 기사를 작성하며 배경지식이 넓어졌다. 올해는 IT 이슈도 다루고, 학교..

회고 2024.12.25

[PM] 실무에 가까운 경험을 만들어가는 방법

주변 개발자와 디자이너들을 보면, 대부분 실무에 가까운 경험을 쌓기 위해 많은 노력을 기울이고 있다. 개발자는 테스트 코드 작성과 리팩토링을 통해 코드의 품질을 높이고, 디자이너는 사용성을 고려한 디자인 시스템을 구축하며 효율적인 디자인을 위해 힘쓴다. 그렇다면 대학생 PM은 어떻게 실무에 가까운 경험을 쌓아갈 수 있을까? 나는 지난 겨울방학 프로젝트 이후 팀원들과 함께 사이드 프로젝트를 이어가며 여러 방법들을 직접 활용해보았고, 이번 글에서 그 경험을 공유해보려 한다! 1. PRD, 기능명세서 그리고 화면명세서 우선 PRD(Product Requirements Document)는 제품에 반영되어야 할 요구 사항을 담은 가이드라고 할 수 있다. 구글의 프로덕트 매니저인 Omar Eduardo는 2020년..

Product/PM 2024.10.27