<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>김세은 블로그</title>
    <link>https://seeunkim.tistory.com/</link>
    <description>초등학교 때 시작한 코딩을 학업과 나란히 끌고 가고 싶습니다.</description>
    <language>ko</language>
    <pubDate>Thu, 18 Jun 2026 13:04:29 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>Seeun Kim</managingEditor>
    <image>
      <title>김세은 블로그</title>
      <url>https://tistory1.daumcdn.net/tistory/8488846/attach/4b087db4232b490c8fae3bf0741ec471</url>
      <link>https://seeunkim.tistory.com</link>
    </image>
    <item>
      <title>Cloudflare Tunnel로 쉽고 안전하게 서비스 운영하기</title>
      <link>https://seeunkim.tistory.com/entry/Cloudflare-Tunnel%EB%A1%9C-%EC%89%BD%EA%B3%A0-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%9A%B4%EC%98%81%ED%95%98%EA%B8%B0</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;오랜만에 방에 고이 보관 중이던 라즈베리파이 4를 꺼내서 무언가를 해보고 싶었다. 개인 프로젝트를 만들고 저장할 때 Github를 사용하니 Github 레포지토리가 난잡해 보여서, &lt;a href=&quot;https://about.gitea.com/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;gitea&lt;/a&gt;를 통해 나만의 Git 서버를 만들어 보기로 했다.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;559&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/KwnsS/dJMcadA2Rc0/GNmFShk6n18zE5zxJI6Oq0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/KwnsS/dJMcadA2Rc0/GNmFShk6n18zE5zxJI6Oq0/img.png&quot; data-alt=&quot;그렇게 만들어 본 셀프 호스티드 Git&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/KwnsS/dJMcadA2Rc0/GNmFShk6n18zE5zxJI6Oq0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKwnsS%2FdJMcadA2Rc0%2FGNmFShk6n18zE5zxJI6Oq0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;657&quot; height=&quot;411&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;559&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;그렇게 만들어 본 셀프 호스티드 Git&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;문제는 외부에서도 접속이 가능케 해야 한다는 것이었다. 처음 Gitea를 설치했을 당시, 외부 접속을 위해 일반적인 포트 포워딩 방식을 고려하였다. 그러나 두 가지 문제로 인해 난관에 부딪혔다. 첫째는 공인 IP 할당의 부재였다. 다이내믹 IP를 사용하고 있었기 때문에, IP가 재할당 되면 레코드를 다시 바꾸어주어야 한다. 둘째는 혹시 모를 보안 문제 때문이다. 외부의 포트 스캔이나 취약점에 노출될 수도 있고, 혹시라도 인터넷이 터지면 집에 연결되어 있는 다수의 기기에도 문제 될 것 같았다.&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;해결책: Cloudflare Tunnel&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이러한 한계를 극복하기 위해 대안을 조사하던 중, &lt;a href=&quot;https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Cloudflare Tunnel&lt;/a&gt;을 찾았고 이를 적용하였다. Cloudflare Tunnel은 내부 서버에서 Cloudflare 네트워크로의 연결을 생성하여 통로를 만드는 방식이다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1099&quot; data-origin-height=&quot;522&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bks7OA/dJMcabwwfe9/uXV8m7kaaKaZINiFZ3C4E1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bks7OA/dJMcabwwfe9/uXV8m7kaaKaZINiFZ3C4E1/img.png&quot; data-alt=&quot;https://blog.cloudflare.com/ko-kr/elevate-load-balancing-with-private-ips-and-cloudflare-tunnels-a-secure-path-to-efficient-traffic-distribution/&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bks7OA/dJMcabwwfe9/uXV8m7kaaKaZINiFZ3C4E1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbks7OA%2FdJMcabwwfe9%2FuXV8m7kaaKaZINiFZ3C4E1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1099&quot; height=&quot;522&quot; data-origin-width=&quot;1099&quot; data-origin-height=&quot;522&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;https://blog.cloudflare.com/ko-kr/elevate-load-balancing-with-private-ips-and-cloudflare-tunnels-a-secure-path-to-efficient-traffic-distribution/&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Cloudflare Tunnel은 Cloudflare에 등록되어 있는 도메인이 있어야 사용가능하다. 나는 seeun.kim 도메인이 이미 CF를 사용 중이었기에, 계속 진행했다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;http://one.dash.cloudflare.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Cloudflare One&lt;/a&gt;에 접속해서 간단한 설정 몇개만 해주면 된다. '네트워크' -&amp;gt; '개요' -&amp;gt; '터널 관리' 버튼을 눌러서 새 터널을 만들 수 있다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;986&quot; data-origin-height=&quot;468&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/V01Qw/dJMcahcrapX/bxIcDcBMO5Ws8dUVhyEVU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/V01Qw/dJMcahcrapX/bxIcDcBMO5Ws8dUVhyEVU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/V01Qw/dJMcahcrapX/bxIcDcBMO5Ws8dUVhyEVU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FV01Qw%2FdJMcahcrapX%2FbxIcDcBMO5Ws8dUVhyEVU1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;986&quot; height=&quot;468&quot; data-origin-width=&quot;986&quot; data-origin-height=&quot;468&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1037&quot; data-origin-height=&quot;583&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/oU2KP/dJMb99ZOtbz/KFNLj15wZUxSQ4MJApobR0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/oU2KP/dJMb99ZOtbz/KFNLj15wZUxSQ4MJApobR0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/oU2KP/dJMb99ZOtbz/KFNLj15wZUxSQ4MJApobR0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoU2KP%2FdJMb99ZOtbz%2FKFNLj15wZUxSQ4MJApobR0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1037&quot; height=&quot;583&quot; data-origin-width=&quot;1037&quot; data-origin-height=&quot;583&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;사실 별로 설명할 것도 없는 것이, 이미 클라우드플레어 사이트 내에 친절한 튜토리얼이 마련되어 있다. 운영체제와 아키텍처에 맞게 cloudflared를 다운로드하고, 실행하면 된다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;710&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ctQXwJ/dJMcahcravC/9jKZpjNzeiUkB3msesbY2k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ctQXwJ/dJMcahcravC/9jKZpjNzeiUkB3msesbY2k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ctQXwJ/dJMcahcravC/9jKZpjNzeiUkB3msesbY2k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctQXwJ%2FdJMcahcravC%2F9jKZpjNzeiUkB3msesbY2k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;894&quot; height=&quot;710&quot; data-origin-width=&quot;894&quot; data-origin-height=&quot;710&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그리고 등록 이후에는 '게시된 응용 프로그램 경로'를 추가해 주면 된다. Nginx 리버스 프록시 비슷한 거라고 보면 되는데, 사용해 보니까 정말 편하다. 프로토콜도 HTTP, HTTPS, SSH, RDP, TCP 등 있을 건 다 있고, 포트도 그대로 입력해도 된다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;816&quot; data-origin-height=&quot;619&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/yPJ37/dJMcac9ZobF/OD49fkzitIDRWCMffhFjDK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/yPJ37/dJMcac9ZobF/OD49fkzitIDRWCMffhFjDK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/yPJ37/dJMcac9ZobF/OD49fkzitIDRWCMffhFjDK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyPJ37%2FdJMcac9ZobF%2FOD49fkzitIDRWCMffhFjDK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;697&quot; height=&quot;529&quot; data-origin-width=&quot;816&quot; data-origin-height=&quot;619&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 외부에서도 내 Git 페이지에 접근할 수 있게 되었다!&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;Cloudflare Tunnel의 이점&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저 보안이 좋다는 것이다. 메커니즘 자체가 외부 -&amp;gt; 내부 요청이 아닌 내부에서 외부로 연결을 시작하는 방식이기에, 공인 IP가 없어도 되고 방화벽조차 따로 만져줄 필요가 없다. 또 클라우드플레어를 통해서만 서버에 접근하기 때문에, 홈 서버의 실제 IP 주소가 노출되지 않는다. DDoS나 포트 스캔 등을 원천적으로 막을 수 있게 된 것이다.&lt;br /&gt;관리도 편리하다. 별도의 복잡한 공유기 설정 없이 cloudflared 실행만으로 터널 구축이 가능하며, 대시보드를 통해서 새로 등록할 수도 있다.&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;결론&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;개인 서비스를 집에서 운영할 때 정말 추천드린다. Cloudflare Tunnel로 네트워크나 서버 보안을 따로 걱정하지 않아도 되었다. 적극적으로 권장합니다!!&lt;/p&gt;</description>
      <category>개발일지</category>
      <category>cloudflare</category>
      <category>cloudflare tunnel</category>
      <category>gitea</category>
      <category>개발</category>
      <category>서버</category>
      <category>포트포워딩</category>
      <category>프로그래밍</category>
      <category>홈서버</category>
      <author>Seeun Kim</author>
      <guid isPermaLink="true">https://seeunkim.tistory.com/5</guid>
      <comments>https://seeunkim.tistory.com/entry/Cloudflare-Tunnel%EB%A1%9C-%EC%89%BD%EA%B3%A0-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EC%84%9C%EB%B9%84%EC%8A%A4-%EC%9A%B4%EC%98%81%ED%95%98%EA%B8%B0#entry5comment</comments>
      <pubDate>Sat, 28 Feb 2026 20:28:06 +0900</pubDate>
    </item>
    <item>
      <title>개인 포트폴리오 사이트 제작 후기</title>
      <link>https://seeunkim.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%8F%AC%ED%86%A0%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91-%ED%9B%84%EA%B8%B0</link>
      <description>&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;오랫동안 미뤄왔던 개인 포트폴리오 사이트 개발을 마무리했다. 도메인을 1월 초에 사놓고, 정작 가장 중요한 메인 홈페이지는 랜딩으로 때워놓았었다. 그러다가 오늘 설 연휴에 시간이 남아 하루 만에 완성하고 배포하기로 다짐했다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;기술 스택 선정&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;개발자의 정체성을 드러내는 게 포트폴리오라고 생각한다. 따라서 나는 요즘에 내가 국밥처럼 사용하는 기술 세트를 사용하기로 했다. 바로 Next.js &amp;amp; TypeScript, Tailwind CSS, Vercel 3종 종합 선물 세트다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;제작 과정 속 고민들&lt;/h4&gt;&lt;p data-ke-size=&quot;size18&quot; style=&quot;text-align: left;&quot;&gt;&lt;b&gt;유지보수&lt;/b&gt;&lt;/p&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;포트폴리오 특성상 내용 변경이 잦다. 새 프로젝트를 게시하거나 SNS 아이디를 바꿔야 할 때, 만약 코드 안에 내용들이 하드코딩 되어있을 경우 수정이 어렵다. 따라서 데이터 객체로 관리하여 내용 수정에 대비했다. 추후에 새 프로젝트를 넣어야 될 때도 그냥 데이터 배열만 추가하면 자동으로 반영되게 코드를 구성했다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;반응형&lt;/b&gt;&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;데스크톱뿐만 아니라 모바일 환경에서도 동일한 사용자 경험을 제공해야 했다. Tailwind의 반응형 프리픽스를 활용했다. fullPage.js가 적용되면 모바일에서 편하지 않길래 모바일 환경에서 비활성화하는 작업도 해주었다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;p data-ke-size=&quot;size18&quot; style=&quot;text-align: left;&quot;&gt;&lt;b&gt;블로그와 연계&lt;/b&gt;&lt;/p&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;포트폴리오에 내 블로그가 자연스레 묻어 나오길 바랐다. 그러던 중 티스토리에서 RSS를 지원한다는 걸 알게 되었고, rss-parser 라이브러리를 사용해서 내가 업데이트를 손수 하지 않아도 새로 쓴 글이 포트폴리오에 보이게끔 사이트를 만들었다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;마치며..&lt;/h4&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1206&quot; data-origin-height=&quot;1564&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/csSbhN/dJMcabC9TTJ/zsyuYtaP8DgKdOwnk8i1UK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/csSbhN/dJMcabC9TTJ/zsyuYtaP8DgKdOwnk8i1UK/img.jpg&quot; data-alt=&quot;처음에 들어오자마자 보이는 Hero 섹션&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/csSbhN/dJMcabC9TTJ/zsyuYtaP8DgKdOwnk8i1UK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcsSbhN%2FdJMcabC9TTJ%2FzsyuYtaP8DgKdOwnk8i1UK%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1206&quot; height=&quot;1564&quot; data-origin-width=&quot;1206&quot; data-origin-height=&quot;1564&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;처음에 들어오자마자 보이는 Hero 섹션&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;&lt;a href=&quot;https://www.seeun.kim/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;https://www.seeun.kim/&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;figure data-ke-type=&quot;opengraph&quot; data-og-title=&quot;김세은&quot; data-ke-align=&quot;alignCenter&quot; data-og-description=&quot;Student Developer &amp;amp; Product Designer 김세은 프로그래밍을 통해 일상생활에 도움을 주는 서비스를 만들고 싶습니다.&quot; data-og-host=&quot;www.seeun.kim&quot; data-og-source-url=&quot;https://www.seeun.kim/&quot; data-og-url=&quot;https://www.seeun.kim/&quot;&gt;&lt;a href=&quot;https://www.seeun.kim/&quot; target=&quot;_blank&quot; data-source-url=&quot;https://www.seeun.kim/&quot;&gt;&lt;div class=&quot;og-image&quot;&gt;&lt;/div&gt;&lt;div class=&quot;og-text&quot;&gt;&lt;p class=&quot;og-title&quot;&gt;김세은&lt;/p&gt;&lt;p class=&quot;og-desc&quot;&gt;Student Developer &amp;amp; Product Designer 김세은 프로그래밍을 통해 일상생활에 도움을 주는 서비스를 만들고 싶습니다.&lt;/p&gt;&lt;p class=&quot;og-host&quot;&gt;www.seeun.kim&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;/figure&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;Vercel에 올린 후 사이트를 다시 한번 정독해 보니, 내가 앞으로 여기에 어떤 내용을 채워나가게 될지 궁금해지고 기대되기도 한다. 나는 완벽한 작업 내역보다는, 개발자로서 끊임없이 변화하고 성장하는 과정을 보여주게끔 구성해나 갈 것이다. 그게 바로 포폴에서 보이는 마이너 프로젝트들이 6년, 4년 전 초등학생 시절에 만들었어도 자랑 스래 게시해 놓은 이유다. 단순한 정보 나열을 넘어서 따뜻함이랄까? 기술적인 고민이나 해결의 흔적들이 포트폴리오와 이 블로그에 담기길 바란다. 그럼 이만!!&lt;/p&gt;</description>
      <category>개발일지</category>
      <category>개발자</category>
      <category>웹사이트</category>
      <category>포트폴리오</category>
      <category>포폴</category>
      <category>프로그래머</category>
      <category>학생</category>
      <author>Seeun Kim</author>
      <guid isPermaLink="true">https://seeunkim.tistory.com/4</guid>
      <comments>https://seeunkim.tistory.com/entry/%EA%B0%9C%EC%9D%B8-%ED%8F%AC%ED%86%A0%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91-%ED%9B%84%EA%B8%B0#entry4comment</comments>
      <pubDate>Sun, 15 Feb 2026 23:16:10 +0900</pubDate>
    </item>
    <item>
      <title>[1일차] 3년 전에 만들고 버린 유튜브 다운로드 프로그램 리팩토링하기</title>
      <link>https://seeunkim.tistory.com/entry/1%EC%9D%BC%EC%B0%A8-3%EB%85%84-%EC%A0%84%EC%97%90-%EB%A7%8C%EB%93%A4%EA%B3%A0-%EB%B2%84%EB%A6%B0-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%ED%95%98%EA%B8%B0</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;'개발' 폴더를 구경하다가, 예비중1 겨울방학에 만든 프로그램이 보였다. YTWarp라는 이름의 유튜브 다운로드 프로그램이었다. 파이썬의 Flask, yt_dlp를 이용하여 부트스트랩으로 된 사이트와 POST 요청 형태의 api도 만들어보는 시도를 했네. ChatGPT가 없던 세상이었으니, 은근 기특하다고 해야겠다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;403&quot; data-origin-height=&quot;156&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/tNAM7/dJMcagRNvyr/6SREuxwwzQdzZwJ3kaEEak/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/tNAM7/dJMcagRNvyr/6SREuxwwzQdzZwJ3kaEEak/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/tNAM7/dJMcagRNvyr/6SREuxwwzQdzZwJ3kaEEak/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtNAM7%2FdJMcagRNvyr%2F6SREuxwwzQdzZwJ3kaEEak%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;403&quot; height=&quot;156&quot; data-origin-width=&quot;403&quot; data-origin-height=&quot;156&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;코드를 실행시켜 웹에 접속해보니 추억이 떠오를듯 하다. 눈누에서 고른듯한 &lt;a href=&quot;https://noonnu.cc/font_page/845&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;수트&lt;/span&gt;&lt;/a&gt; 폰트, 문의 이메일로 볼수 있는 Freenom발 .tk 도메인까지... 내부 소스에도 초딩스러운 if문의 나열, 가짜로 만들어본 에러 코드를 찾을 수 있었다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;462&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnGkhb/dJMcabQtI4Z/Yqd5CDrEvh1qH3cytHX1Nk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnGkhb/dJMcabQtI4Z/Yqd5CDrEvh1qH3cytHX1Nk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnGkhb/dJMcabQtI4Z/Yqd5CDrEvh1qH3cytHX1Nk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bnGkhb/dJMcabQtI4Z/Yqd5CDrEvh1qH3cytHX1Nk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;728&quot; height=&quot;462&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;462&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;469&quot; data-origin-height=&quot;210&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bMUS8v/dJMcagxufo9/uMZ54eD8PkNbneZE2752c1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bMUS8v/dJMcagxufo9/uMZ54eD8PkNbneZE2752c1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bMUS8v/dJMcagxufo9/uMZ54eD8PkNbneZE2752c1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMUS8v%2FdJMcagxufo9%2FuMZ54eD8PkNbneZE2752c1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;469&quot; height=&quot;210&quot; data-origin-width=&quot;469&quot; data-origin-height=&quot;210&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;보시는 분이 있을진 모르겠다만 소스도 첨부해보겠다. &lt;a href=&quot;https://www.ffmpeg.org/download.html&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;ffmpeg.exe&lt;/span&gt;&lt;/a&gt;를 다운로드하고 폴더에 추가해야 정상적인 동작이 가능하다.&lt;/p&gt;&lt;figure class=&quot;fileblock&quot; data-ke-align=&quot;alignCenter&quot;&gt;&lt;a href=&quot;https://blog.kakaocdn.net/dn/4Aq4K/dJMcajuamOH/7n9RSKrjv7Mvml9Qe98sQ0/YTWarp-old.zip?attach=1&amp;amp;knm=tfile.zip&quot; class=&quot;&quot;&gt;
    &lt;div class=&quot;image&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt;&lt;div class=&quot;filename&quot;&gt;&lt;span class=&quot;name&quot;&gt;YTWarp-old.zip&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;size&quot;&gt;0.00MB&lt;/div&gt;
&lt;/div&gt;
  &lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;바꾸자! 더 세련되게, 더 간단하게&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;만들었던 코드는 기능상 문제가 없지만, 개선할 사항 몇가지가 눈에 띤다.&lt;/p&gt;&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;&lt;li&gt;DRY (Don't Repeat Yourself) (중복배제): 다운로드 및 파일 전송 로직이 다운로드 타입 판별용 if-elif 문마다 반복되고 있다.&lt;/li&gt;&lt;li&gt;프론트엔드 깔끔하게: 기존 디자인보다 더 직관적이고 예쁜 디자인을 구현한다. Tailwind CSS와 함께, 안에 있는 내용을 건들여보곘다.&lt;/li&gt;&lt;li&gt;기타 코드 최적화: 파일명을 랜덤 숫자로 해놓는 것 대신 타임스탬프를 사용하고, 스파게티 코드를 여러 함수로 나누어 잘 읽히게 만들어보곘다.&lt;/li&gt;&lt;li&gt;PyInstaller로 .exe 실행 파일까지 만들어보기&lt;/li&gt;&lt;/ol&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;&lt;br&gt;까지 진행해보려 한다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;다음 글에서..&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;이렇게 계획을 세워놓았으니, 다음 글은 개발 과정과 코드를 중심으로 작성해보겠다. 만든 프로그램은 깃허브 레포에 업로드할 예정이다.&lt;br&gt;읽어주셔서 감사합니다!&lt;/p&gt;</description>
      <category>개발일지/프로그램</category>
      <author>Seeun Kim</author>
      <guid isPermaLink="true">https://seeunkim.tistory.com/3</guid>
      <comments>https://seeunkim.tistory.com/entry/1%EC%9D%BC%EC%B0%A8-3%EB%85%84-%EC%A0%84%EC%97%90-%EB%A7%8C%EB%93%A4%EA%B3%A0-%EB%B2%84%EB%A6%B0-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81%ED%95%98%EA%B8%B0#entry3comment</comments>
      <pubDate>Mon, 9 Feb 2026 02:06:04 +0900</pubDate>
    </item>
    <item>
      <title>&amp;quot;오늘 뭐 입지?&amp;quot; 고민하다가 4시간 만에 만든 '깔롱진 옷장' 제작기</title>
      <link>https://seeunkim.tistory.com/entry/%EC%98%A4%EB%8A%98-%EB%AD%90-%EC%9E%85%EC%A7%80-%EA%B3%A0%EB%AF%BC%ED%95%98%EB%8B%A4%EA%B0%80-4%EC%8B%9C%EA%B0%84-%EB%A7%8C%EC%97%90-%EB%A7%8C%EB%93%A0-%EA%B9%94%EB%A1%B1%EC%A7%84-%EC%98%B7%EC%9E%A5-%EC%A0%9C%EC%9E%91%EA%B8%B0</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;고등학교 입학을 앞두고 공부하느라 바쁜 요즘이지만, 오래간만에 학원이 없는 토요일이 찾아와 웹 서비스 아이디어를 찾고 있었다. 그러다 매일 입을 옷을 옷장 앞에서 휘적거리는 대신, 침대에 누워서 폰으로 내 옷들을 슥슥 넘겨보며 코디할 수 있으면 좋겠다는 생각이 들어 웹사이트를 만들어보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://closet.seeun.kim/&quot;&gt;https://closet.seeun.kim/&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1768648237543&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;깔롱진 옷장&quot; data-og-description=&quot;문의하기 | 개인정보취급방침 &amp;copy; 2026 seeun.kim All rights reserved.&quot; data-og-host=&quot;closet.seeun.kim&quot; data-og-source-url=&quot;https://closet.seeun.kim/&quot; data-og-url=&quot;https://closet.seeun.kim/&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://closet.seeun.kim/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://closet.seeun.kim/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;깔롱진 옷장&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;문의하기 | 개인정보취급방침 &amp;copy; 2026 seeun.kim All rights reserved.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;closet.seeun.kim&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;649&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/byKFjs/dJMcahwo56k/Ccm73u1ZH8yrees0zJdmg0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/byKFjs/dJMcahwo56k/Ccm73u1ZH8yrees0zJdmg0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/byKFjs/dJMcahwo56k/Ccm73u1ZH8yrees0zJdmg0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyKFjs%2FdJMcahwo56k%2FCcm73u1ZH8yrees0zJdmg0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;394&quot; height=&quot;649&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;649&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;테크 스택&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;빠르게 만들고 배포하는 토이 프로젝트로 기획된 웹사이트기에, 가성비가 좋은 프레임워크와 기술들을 사용해 보았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한 달 전쯤에 보안 취약점으로 이슈가 되기도 했지만 프론트엔드와 간단한 백엔드 구현까지 빠르게 할 수 있는 &lt;a href=&quot;https://nextjs.org&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Next.JS&lt;/a&gt;를 선택했다. 최근 v16을 릴리스하며 Turbopack도 정식 지원한다. 익혀두면 쓸 일이 많은 프레임워크다 보니 겸사겸사 학습을 위해서 택했기도 하다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그 다음은 &lt;a href=&quot;https://firebase.google.com&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Firebase&lt;/a&gt;다. 서버 구축 없이 인증 (Authentication), 데이터베이스 (Firestore) 그리고 스토리지 (Storage)까지 구현할 수 있기 때문이다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;기능 1: 옷 등록 및 카테고리 지정&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;352&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnL10l/dJMcaaKOzXw/kozKorEPB8HhHnK9ayx5Jk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnL10l/dJMcaaKOzXw/kozKorEPB8HhHnK9ayx5Jk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnL10l/dJMcaaKOzXw/kozKorEPB8HhHnK9ayx5Jk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bnL10l/dJMcaaKOzXw/kozKorEPB8HhHnK9ayx5Jk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;394&quot; height=&quot;352&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;352&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;유저는 사진을 선택하거나 (모바일의 경우) 촬영하여 이미지를 업로드할 수 있다. 그 뒤 모자/상의/하의/신발/액세서리 5가지 카테고리 중 하나로 분류해 등록이 가능하다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;구현 과정에서 Firebase 스토리지의 도움을 받았다. Pay-as-you-go로 가는 Blaze 요금제는 총합 5GB의 데이터를 저장하고 월 10GB의 트래픽까지 무료로 사용할 수 있게 해 준다. 용량이 큰 이미지가 많아질 경우를 대비하여, &lt;a href=&quot;https://www.npmjs.com/package/browser-image-compression&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;browser-image-compression&lt;/a&gt; 라이브러리도 함께 사용했다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1768649635081&quot; class=&quot;javascript&quot; data-ke-language=&quot;javascript&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;const compressedFile = await imageCompression(file, { maxSizeMB: 0.2, maxWidthOrHeight: 800 });&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;라이브러리를 사용하면 이런 식으로 용량 한도를 200KB까지, 최대 사이즈를 800까지 등으로 지정하여 압축이 가능하다. 모바일에서는 화질이 조금 깨진다 한들 육안으로 크게 표시 나지 않기에 이런 식으로 제한해 두어도 좋다. 혹시 모를 언젠가를 대비하여.&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;기능 2: 믹스 앤 매치 (Mix &amp;amp; Match)&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;옷장을 헤집는 것 대신, 화살표로 왔다 갔다 넘기면서 코디를 정할 수 있다.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 녹화 중 2026-01-17 200550.gif&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;856&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bMUG9v/dJMcacV9yQJ/Kvw0S8AGVJPB6erKzrfOI0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bMUG9v/dJMcacV9yQJ/Kvw0S8AGVJPB6erKzrfOI0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bMUG9v/dJMcacV9yQJ/Kvw0S8AGVJPB6erKzrfOI0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bMUG9v/dJMcacV9yQJ/Kvw0S8AGVJPB6erKzrfOI0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;394&quot; height=&quot;856&quot; data-filename=&quot;화면 녹화 중 2026-01-17 200550.gif&quot; data-origin-width=&quot;394&quot; data-origin-height=&quot;856&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;각 카테고리(모자, 상의, 하의 등) 별로 현재 보이는 아이템의 인덱스를 관리한다. 왼쪽 화살표 (뒤로 가기)를 누르면 -1, 오른쪽 앞으로 가기 화살표를 누르면 +1을 더해서 배열 안 아이템을 보여준다. 배열의 길이를 초과하거나 음수가 되지 않도록 다시 돌아오는 순환 로직도 적용했다.&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;기능 3: 코디 저장&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;자기 전 &quot;내일 뭐 입지?&quot; 하며 고민하는 상황에 대비해, 무신사의 '스냅'이나 룩북처럼 세트를 만들 수 있다. 코디의 이름을 지정하고, 하단 '나의 코디북' 탭에서 재조회가 가능하다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;596&quot; data-origin-height=&quot;782&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bWvJpR/dJMcaiPy3d0/PDR4FzKKUQ6am7YKfSxri1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bWvJpR/dJMcaiPy3d0/PDR4FzKKUQ6am7YKfSxri1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bWvJpR/dJMcaiPy3d0/PDR4FzKKUQ6am7YKfSxri1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bWvJpR/dJMcaiPy3d0/PDR4FzKKUQ6am7YKfSxri1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;596&quot; height=&quot;782&quot; data-origin-width=&quot;596&quot; data-origin-height=&quot;782&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코디를 만들면 Firestore 'outfits' 테이블에 저장된다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;265&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/2M0Nm/dJMcahwo6Ki/otx9XTOWXxSSbELHOYwgWk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/2M0Nm/dJMcahwo6Ki/otx9XTOWXxSSbELHOYwgWk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/2M0Nm/dJMcahwo6Ki/otx9XTOWXxSSbELHOYwgWk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2M0Nm%2FdJMcahwo6Ki%2Fotx9XTOWXxSSbELHOYwgWk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;400&quot; height=&quot;265&quot; data-origin-width=&quot;400&quot; data-origin-height=&quot;265&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;각 코디는 아이템들에 대한 정보와 이름, 만든 유저의 아이디 값을 가지고 있어서 다시 로그인하거나 접속 기기가 바뀌어도 사라지지 않고 계속 남아있다. 또 생성 시간을 표시해 두어 언제 이 룩을 입었는지 또는 고안해 보았는지 까지 가볍게 확인할 수 있겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;후기&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;'코몽 프로젝트' 개발 편에서는 제미나이가 초안을 작성해 주고, 내가 덧붙이는 방식으로 개발을 많이 했었다. 이번에는 Next.JS와 자바스크립트 능력을 기르고 싶은 마음과 약간의 오기(?)가 생겨서 지루하고 현학적인 개인정보취급방침을 제외하면 Copilot 정도의 도움만 받았다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;생각보다 구현이 어려웠던 기능은 의외로 첫 화면에서 보이는 'Google 계정으로 계속하기'였다 (ㅋㅋ). create-next-app으로 생성된 템플릿에서 src, lib, components 폴더들을 추가하고, router로 로그인 후 /app으로 이동하고, 다시 인증 정보를 받고 등등.. 그래도 한번 해봤으니 다음에는 더 빨리 해볼 수 있겠지?&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음번에는 생성형 인공지능을 연결해서 자동 코디 추천 같은 기능을 만들어보도록 하겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;글 읽어주셔서 고맙고, 조만간 또 돌아오겠습니다!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>개발일지/웹 서비스</category>
      <category>firebase</category>
      <category>nextjs</category>
      <category>개발자</category>
      <category>룩북</category>
      <category>옷장</category>
      <category>웹사이트</category>
      <category>웹서비스</category>
      <category>코디</category>
      <category>프로그래머</category>
      <category>학생</category>
      <author>Seeun Kim</author>
      <guid isPermaLink="true">https://seeunkim.tistory.com/2</guid>
      <comments>https://seeunkim.tistory.com/entry/%EC%98%A4%EB%8A%98-%EB%AD%90-%EC%9E%85%EC%A7%80-%EA%B3%A0%EB%AF%BC%ED%95%98%EB%8B%A4%EA%B0%80-4%EC%8B%9C%EA%B0%84-%EB%A7%8C%EC%97%90-%EB%A7%8C%EB%93%A0-%EA%B9%94%EB%A1%B1%EC%A7%84-%EC%98%B7%EC%9E%A5-%EC%A0%9C%EC%9E%91%EA%B8%B0#entry2comment</comments>
      <pubDate>Sat, 17 Jan 2026 21:08:08 +0900</pubDate>
    </item>
    <item>
      <title>코몽 개발 수기: 중학교 3학년이 웹 서비스를 출시할 수 있을까?</title>
      <link>https://seeunkim.tistory.com/entry/%EC%BD%94%EB%AA%BD-%EA%B0%9C%EB%B0%9C-%EC%88%98%EA%B8%B0-%EC%A4%91%ED%95%99%EA%B5%90-3%ED%95%99%EB%85%84%EC%9D%B4-%EC%9B%B9-%EC%84%9C%EB%B9%84%EC%8A%A4%EB%A5%BC-%EC%B6%9C%EC%8B%9C%ED%95%A0-%EC%88%98-%EC%9E%88%EC%9D%84%EA%B9%8C</link>
      <description>&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;코몽 프로젝트&lt;/b&gt;&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;작년 한해간 어르신들의 디지털 고립 (Digital Isolation) 문제를 해결하기 위한 학교 프로젝트를 진행했다. 이 글에서는 나와 친구들이 진행한 '코몽 프로젝트'의 과정을 담았다.&lt;br&gt;1학기부터 2학기, 처음과 끝까지의 내용이 모두 포함되어 있어 글이 다소 지엽적이고 개발보다 '운영', '팀 워크', '성장'에 초점이 맞춰진 일기 형태의 글이지만, 끝까지 읽어주시길 부탁드린다.&lt;br&gt;&amp;nbsp;&lt;br&gt;&lt;a href=&quot;https://www.comong.xyz&quot; target=&quot;_self&quot;&gt;&lt;span&gt;https://www.comong.xyz&lt;/span&gt;&lt;/a&gt;&lt;br&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;나에게 ‘서비스’란 무엇이었나&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot; style=&quot;text-align: left;&quot;&gt;초등학교 때 블록 코딩 플랫폼 엔트리에서 게임 몇 개를 만들어보며, 더 나아가고 싶다는 생각이 들었었다. 초등학교 5학년에 불과했지만, 구글 프로그래머블 검색 엔진을 이용해 간단한 포털 사이트를 만들었다. 도메인과 서버를 사고, 야심 차게 TLS 인증서까지. 문제는 항상 같았다. 쓰는 사람이 거의 없었다는 것. 누가 쓰지 않아도, 대시보드에 찍히는 숫자가 한자리, 두 자리여도, 완성해서 인터넷에 올려보는 게 재미있었다. &lt;br&gt;&lt;br&gt;그러다 중학생이 되며 자연스레 코딩과는 거리를 두어야 했다. 정보 영재원에서 아두이노와 C언어 등을 계속 배우기는 했지만, '서비스'라고 부를만한 것을 많이 만들지는 못했다. 방학이 돼서야 하루, 이틀 정도 투자한 간단한 파이썬 라이브러리나 웹사이트를 만들고, 이마저도 배포까지는 하지 않았다. 늘 혼자 만들어보고, 가족에게만 보여주는 정도였다.&lt;br&gt;&amp;nbsp;&lt;br&gt;그러다가 2025년, 중학교 마지막 학년에 오를 때 기회가 찾아왔다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 style=&quot;text-align: left;&quot; data-ke-size=&quot;size20&quot;&gt;공동체 프로젝트 - 서비스를 론칭할 기회가 오다&lt;/h4&gt;&lt;figure class=&quot;imageblock widthContent&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;944&quot; data-origin-height=&quot;513&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/7G0Em/dJMcagKZYIa/gODeIEdZ2TG8qyKtpSO110/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/7G0Em/dJMcagKZYIa/gODeIEdZ2TG8qyKtpSO110/img.png&quot; data-alt=&quot;IB 공식 홈페이지 (https://www.ibo.org/programmes/middle-years-programme/curriculum/myp-projects/) 스크린샷&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/7G0Em/dJMcagKZYIa/gODeIEdZ2TG8qyKtpSO110/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7G0Em%2FdJMcagKZYIa%2FgODeIEdZ2TG8qyKtpSO110%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;944&quot; height=&quot;513&quot; data-origin-width=&quot;944&quot; data-origin-height=&quot;513&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;IB 공식 홈페이지 (https://www.ibo.org/programmes/middle-years-programme/curriculum/myp-projects/) 스크린샷&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;내가&amp;nbsp;다니는&amp;nbsp;중학교에선&amp;nbsp;IB(International&amp;nbsp;Baccalaureate)&amp;nbsp;월드스쿨&amp;nbsp;MYP&amp;nbsp;교육과정의&amp;nbsp;일부로&amp;nbsp;'공동체&amp;nbsp;프로젝트&amp;nbsp;(Community&amp;nbsp;Project)'를&amp;nbsp;진행한다.&amp;nbsp;매년&amp;nbsp;2~4명의&amp;nbsp;팀을&amp;nbsp;구성해&amp;nbsp;지역&amp;nbsp;사회&amp;nbsp;내에&amp;nbsp;문제점들을&amp;nbsp;발견하고,&amp;nbsp;해결&amp;nbsp;방안을&amp;nbsp;모색하고&amp;nbsp;실천하여&amp;nbsp;연말에&amp;nbsp;발표까지&amp;nbsp;진행한다.&amp;nbsp;2학년이었던&amp;nbsp;재작년에는&amp;nbsp;학생들의&amp;nbsp;인권&amp;nbsp;의식&amp;nbsp;함양을&amp;nbsp;주제로&amp;nbsp;캠페인을&amp;nbsp;진행했지만,&amp;nbsp;단발성&amp;nbsp;행사로&amp;nbsp;그쳐&amp;nbsp;아쉬움이&amp;nbsp;남았다.&amp;nbsp;중학교&amp;nbsp;3학년에는&amp;nbsp;내가&amp;nbsp;좋아하는&amp;nbsp;코딩이라는&amp;nbsp;주제를&amp;nbsp;살릴&amp;nbsp;기회가&amp;nbsp;찾아왔다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;프로젝트의 출발&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;3학년 처음부터 공동체 프로젝트를 코딩과 연관시킬 계획이었던 건 아니다. 사실 나는 다른 친구들과 함께 과학이나 수학 관련 주제로 프로젝트를 진행하기로 얘기되어 있었다. 그러다 다른 친구가 '청소년 수면 문제를 주제로 한 앱'을 만들어보자고 말했다. 단순한 캠페인이 아니라, 실제로 사용할 수 있는 형태의 서비스를 만들자는 이야기였다.&amp;nbsp;&lt;br&gt;&lt;br&gt;솔직히&amp;nbsp;처음에는&amp;nbsp;망설였다.&amp;nbsp;2년&amp;nbsp;간&amp;nbsp;친구들과&amp;nbsp;생활하다&amp;nbsp;보니&amp;nbsp;학교에서&amp;nbsp;'코딩&amp;nbsp;좀&amp;nbsp;하는&amp;nbsp;아이'가&amp;nbsp;되어&amp;nbsp;있었고,&amp;nbsp;실제로&amp;nbsp;앱이나&amp;nbsp;웹&amp;nbsp;서비스는&amp;nbsp;만들&amp;nbsp;수&amp;nbsp;있다.&amp;nbsp;문제는&amp;nbsp;그다음이었다.&amp;nbsp;기획,&amp;nbsp;개발,&amp;nbsp;디자인,&amp;nbsp;그리고&amp;nbsp;팀&amp;nbsp;협업까지.&amp;nbsp;지금까지&amp;nbsp;내가&amp;nbsp;해왔던&amp;nbsp;것과는&amp;nbsp;차원이&amp;nbsp;다른&amp;nbsp;일이었다.&amp;nbsp;여태껏&amp;nbsp;혼자서&amp;nbsp;내키는&amp;nbsp;대로&amp;nbsp;기획과&amp;nbsp;개발을&amp;nbsp;동시에&amp;nbsp;진행하고,&amp;nbsp;조용히&amp;nbsp;만든&amp;nbsp;프로젝트와&amp;nbsp;달리,&amp;nbsp;이건&amp;nbsp;여러&amp;nbsp;명이&amp;nbsp;끝까지&amp;nbsp;가야&amp;nbsp;하는&amp;nbsp;프로젝트였다.&amp;nbsp;하지만&amp;nbsp;동시에,&amp;nbsp;이게&amp;nbsp;바로&amp;nbsp;내가&amp;nbsp;찾고&amp;nbsp;있던&amp;nbsp;기회라는&amp;nbsp;생각도&amp;nbsp;들었다.&amp;nbsp;내가&amp;nbsp;미래에&amp;nbsp;바라는&amp;nbsp;최종&amp;nbsp;목표인&amp;nbsp;'IT&amp;nbsp;스타트업&amp;nbsp;사업가'에&amp;nbsp;한&amp;nbsp;발짝&amp;nbsp;더&amp;nbsp;다가갈&amp;nbsp;수&amp;nbsp;있는&amp;nbsp;시간이&amp;nbsp;될&amp;nbsp;것만&amp;nbsp;같았다.&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;488&quot; data-origin-height=&quot;452&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/coKEN4/dJMcagjUJRq/IASwENl5BmsU17dfKJZUBK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/coKEN4/dJMcagjUJRq/IASwENl5BmsU17dfKJZUBK/img.png&quot; data-alt=&quot;작업 문서 (주제 정하기 (Choose a CP topic)) 스크린샷&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/coKEN4/dJMcagjUJRq/IASwENl5BmsU17dfKJZUBK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcoKEN4%2FdJMcagjUJRq%2FIASwENl5BmsU17dfKJZUBK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;433&quot; height=&quot;401&quot; data-origin-width=&quot;488&quot; data-origin-height=&quot;452&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;작업 문서 (주제 정하기 (Choose a CP topic)) 스크린샷&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;5월에 팀이 최종적으로 편성되고, 약 2주 남짓 주제를 정하는 데에 시간을 할애했다. 대상을 어르신, 청소년, 환경 셋 중 하나, 해결방안은 코딩으로 고정해 놓고 세부적인 주제를 논의했다. 수면, 젠더 이슈, 새로운 AI 서비스, 가난, 빈곤, 환경오염 등등.. 일종의 브레인스토밍을 진행해 보았다. 최종적으로는 어르신분들을 위해 코딩으로 여러 가지 도움을 줄 수 있는 애플리케이션을 만들기로 결정했다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;6월: 첫 프로토타입&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;앞서&amp;nbsp;언급했던&amp;nbsp;프로젝트를&amp;nbsp;제의해&amp;nbsp;준&amp;nbsp;친구,&amp;nbsp;그리고&amp;nbsp;나의&amp;nbsp;친한&amp;nbsp;친구와&amp;nbsp;나&amp;nbsp;셋이서&amp;nbsp;같은&amp;nbsp;팀이었다.&amp;nbsp;내가&amp;nbsp;어렸을&amp;nbsp;때부터&amp;nbsp;밥&amp;nbsp;먹듯&amp;nbsp;프로그래밍했기에,&amp;nbsp;코딩은&amp;nbsp;내가&amp;nbsp;도맡고&amp;nbsp;둘은&amp;nbsp;프로젝트&amp;nbsp;운영과&amp;nbsp;미디어&amp;nbsp;편집을&amp;nbsp;맡았다. &lt;br&gt;&lt;br&gt;6월&amp;nbsp;24일부터&amp;nbsp;25일까지&amp;nbsp;있었던&amp;nbsp;1학기&amp;nbsp;지필고사를&amp;nbsp;마무리하고,&amp;nbsp;그&amp;nbsp;주&amp;nbsp;일요일에&amp;nbsp;앱의&amp;nbsp;뼈대를&amp;nbsp;만들기로&amp;nbsp;결심했다.&amp;nbsp;프런트엔드와&amp;nbsp;백엔드&amp;nbsp;둘&amp;nbsp;다&amp;nbsp;개발해야&amp;nbsp;했기에,&amp;nbsp;풀&amp;nbsp;스택&amp;nbsp;웹&amp;nbsp;프레임워크인&amp;nbsp;Next.js를&amp;nbsp;사용하기로&amp;nbsp;정했다.&amp;nbsp;시간이&amp;nbsp;촉박했고&amp;nbsp;빨리&amp;nbsp;프로토타입을&amp;nbsp;만들어야&amp;nbsp;했기에,&amp;nbsp;(물론&amp;nbsp;나는&amp;nbsp;싫어하는&amp;nbsp;말이지만)&amp;nbsp;Vibe&amp;nbsp;Coding처럼&amp;nbsp;Firebase&amp;nbsp;Studio를&amp;nbsp;사용해서&amp;nbsp;스케치했다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1064&quot; data-origin-height=&quot;567&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/AuzSN/dJMcaiILGCV/l7pkr5PS4k42wdWpKuNzX0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/AuzSN/dJMcaiILGCV/l7pkr5PS4k42wdWpKuNzX0/img.png&quot; data-alt=&quot;2025. 6. 29 일요일&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/AuzSN/dJMcaiILGCV/l7pkr5PS4k42wdWpKuNzX0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAuzSN%2FdJMcaiILGCV%2Fl7pkr5PS4k42wdWpKuNzX0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1064&quot; height=&quot;567&quot; data-origin-width=&quot;1064&quot; data-origin-height=&quot;567&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;2025. 6. 29 일요일&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;기본적인&amp;nbsp;프론트앤드&amp;nbsp;디자인은&amp;nbsp;제미나이가&amp;nbsp;해주고,&amp;nbsp;백엔드&amp;nbsp;절반&amp;nbsp;정도와&amp;nbsp;디버깅만&amp;nbsp;내가&amp;nbsp;진행했다.&amp;nbsp;스케치로&amp;nbsp;이&amp;nbsp;정도의&amp;nbsp;앱을&amp;nbsp;만들&amp;nbsp;수&amp;nbsp;있다는&amp;nbsp;것에&amp;nbsp;대한&amp;nbsp;작은&amp;nbsp;충격을&amp;nbsp;받으며….&amp;nbsp;라이브러리&amp;nbsp;문서와&amp;nbsp;스택&amp;nbsp;오버플로를&amp;nbsp;뒤지며&amp;nbsp;기능&amp;nbsp;하나&amp;nbsp;구현에&amp;nbsp;한&amp;nbsp;시간을&amp;nbsp;소모했던&amp;nbsp;초등학교&amp;nbsp;시절&amp;nbsp;김세은이&amp;nbsp;불쌍해졌었다. &lt;br&gt;&lt;br&gt;이후&amp;nbsp;'유용한&amp;nbsp;기능'과&amp;nbsp;iOS에서는&amp;nbsp;프로파일&amp;nbsp;설치,&amp;nbsp;안드로이드에서는. apk&amp;nbsp;다운로드로&amp;nbsp;설치할&amp;nbsp;수&amp;nbsp;있는&amp;nbsp;웹&amp;nbsp;앱도&amp;nbsp;만들어보며&amp;nbsp;경로당에&amp;nbsp;가서&amp;nbsp;홍보드릴&amp;nbsp;생각에&amp;nbsp;팀원들과&amp;nbsp;싱글벙글했다.&lt;br&gt;&amp;nbsp;&lt;br&gt;그러다..&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;고등학교 입시 준비, 그리고 뒷전이 된 프로젝트&lt;/h4&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;563&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/XODf6/dJMcah4ce6S/IQpre6GzkKKak6NJwnKyPK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/XODf6/dJMcah4ce6S/IQpre6GzkKKak6NJwnKyPK/img.png&quot; data-alt=&quot;당리역 부근, 2025. 8. 10&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/XODf6/dJMcah4ce6S/IQpre6GzkKKak6NJwnKyPK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXODf6%2FdJMcah4ce6S%2FIQpre6GzkKKak6NJwnKyPK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;504&quot; height=&quot;355&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;563&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;당리역 부근, 2025. 8. 10&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;남은&amp;nbsp;수행평가&amp;nbsp;마무리,&amp;nbsp;체육&amp;nbsp;대회,&amp;nbsp;과학&amp;nbsp;축전&amp;nbsp;등의&amp;nbsp;학교&amp;nbsp;행사를&amp;nbsp;지나&amp;nbsp;여름방학을&amp;nbsp;맞이했다.&amp;nbsp;1학기가&amp;nbsp;끝나기&amp;nbsp;전,&amp;nbsp;여름방학&amp;nbsp;3주를&amp;nbsp;활용하여&amp;nbsp;만나서&amp;nbsp;경로당에&amp;nbsp;가자고&amp;nbsp;팀원과&amp;nbsp;얘기되었었다.&amp;nbsp;하지만&amp;nbsp;이때쯤에&amp;nbsp;과학고등학교에&amp;nbsp;관심이&amp;nbsp;생겨&amp;nbsp;입시&amp;nbsp;학원을&amp;nbsp;알아보았고,&amp;nbsp;매일매일&amp;nbsp;자기소개서&amp;nbsp;작성,&amp;nbsp;면접&amp;nbsp;수업에다&amp;nbsp;물리·화학·생물·지학까지&amp;nbsp;바쁜&amp;nbsp;나날을&amp;nbsp;보냈다.&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;406&quot; data-origin-height=&quot;248&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cc5CWP/dJMcabbQdfN/rjv2tkuLv6hSYIxKHzQci0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cc5CWP/dJMcabbQdfN/rjv2tkuLv6hSYIxKHzQci0/img.jpg&quot; data-alt=&quot;CP 단톡방에서의 첫 대화&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cc5CWP/dJMcabbQdfN/rjv2tkuLv6hSYIxKHzQci0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcc5CWP%2FdJMcabbQdfN%2Frjv2tkuLv6hSYIxKHzQci0%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;406&quot; height=&quot;248&quot; data-origin-width=&quot;406&quot; data-origin-height=&quot;248&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;CP 단톡방에서의 첫 대화&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;한편,&amp;nbsp;7월&amp;nbsp;25일&amp;nbsp;여름방학을&amp;nbsp;맞이하고&amp;nbsp;CP&amp;nbsp;단톡방이&amp;nbsp;만들어졌다.&amp;nbsp;하지만&amp;nbsp;바쁜&amp;nbsp;건&amp;nbsp;나만이&amp;nbsp;아니었다.&amp;nbsp;나머지&amp;nbsp;친구들도&amp;nbsp;과고,&amp;nbsp;특목고를&amp;nbsp;준비했기&amp;nbsp;때문에&amp;nbsp;방학은&amp;nbsp;우리에게&amp;nbsp;학교가&amp;nbsp;학원으로&amp;nbsp;대체된&amp;nbsp;기간이었을&amp;nbsp;뿐이었다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;932&quot; data-origin-height=&quot;345&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/chdVqk/dJMcac2Rb0y/96yPL5iGLFqUukRFty5wHK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/chdVqk/dJMcac2Rb0y/96yPL5iGLFqUukRFty5wHK/img.png&quot; data-alt=&quot;2025. 8. 11&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/chdVqk/dJMcac2Rb0y/96yPL5iGLFqUukRFty5wHK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FchdVqk%2FdJMcac2Rb0y%2F96yPL5iGLFqUukRFty5wHK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;932&quot; height=&quot;345&quot; data-origin-width=&quot;932&quot; data-origin-height=&quot;345&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;2025. 8. 11&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;담당&amp;nbsp;선생님들&amp;nbsp;이제&amp;nbsp;와서&amp;nbsp;미안합니다.&amp;nbsp;개학이&amp;nbsp;3일&amp;nbsp;남았을&amp;nbsp;때,&amp;nbsp;도저히&amp;nbsp;시간이&amp;nbsp;맞춰지지&amp;nbsp;않았다.&amp;nbsp;프로젝트를&amp;nbsp;실천하는&amp;nbsp;게&amp;nbsp;(Action)&amp;nbsp;숙제였던&amp;nbsp;우리는,&amp;nbsp;다급하게&amp;nbsp;줌&amp;nbsp;회의&amp;nbsp;하나&amp;nbsp;열어서&amp;nbsp;땜질을..&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;626&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bctrlU/dJMcabQrwsf/N9Yok1Kfzt79KvEQXk3FmK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bctrlU/dJMcabQrwsf/N9Yok1Kfzt79KvEQXk3FmK/img.png&quot; data-alt=&quot;어진샘노인복지관 앞, 2025. 9. 6&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bctrlU/dJMcabQrwsf/N9Yok1Kfzt79KvEQXk3FmK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbctrlU%2FdJMcabQrwsf%2FN9Yok1Kfzt79KvEQXk3FmK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;565&quot; height=&quot;442&quot; data-origin-width=&quot;800&quot; data-origin-height=&quot;626&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;어진샘노인복지관 앞, 2025. 9. 6&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러다가 진짜 Action을 실행할 수 있는 기회가 찾아왔다. 담임 선생님께서 학생들을 결혼식에 초대해 주셨고, 식이 시작되기 약 세 시간 전, 근처에서 짧은 활동을 진행해 보자는 계획이 자연스럽게 잡혔다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;354&quot; data-origin-height=&quot;354&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JLEqg/dJMcajnl88o/GF4aQWF2xKlOtfRD473Fv0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JLEqg/dJMcajnl88o/GF4aQWF2xKlOtfRD473Fv0/img.jpg&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JLEqg/dJMcajnl88o/GF4aQWF2xKlOtfRD473Fv0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJLEqg%2FdJMcajnl88o%2FGF4aQWF2xKlOtfRD473Fv0%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;354&quot; height=&quot;354&quot; data-origin-width=&quot;354&quot; data-origin-height=&quot;354&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;하지만 현실은 늘 계획보다 먼저 도착한다. 전날 복지관에 확인 전화를 드렸고, 외부 팀의 현장 활동은 받아주기 어렵다는 답을 들었다.&amp;nbsp;지금 글 위에 있는 인증 사진은 사실 그 이후에 찍은 것이다. 활동을 했다고 속이려는 의도는 아니었지만, 아무것도 하지 못한 채 돌아섰다는 사실이 아쉬워서, 최소한의 기록이라도 남기고 싶었다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;다시 초심으로,&amp;nbsp;&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;9월 초에 마지막으로 만나고, 매주 월요일마다 찾아오는 공동체 프로젝트 시간에는 딱히 성과가 없었다. 10월 말 2학기 지필고사가 끝나고 나서야 비로소 다시 재개할 수 있었다.&lt;br&gt;&amp;nbsp;&lt;br&gt;고등학교 1차 면접도 마무리, 수행평가도 끝나가는 이 시점에서 12월에 있을 발표를 위해 최소한의 노력이라도 진행하자는 태도를 다시 가져보았다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;322&quot; data-origin-height=&quot;169&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/oDYPB/dJMcaacWeJt/kKJCPKSAxlnYeuyX2zAksk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/oDYPB/dJMcaacWeJt/kKJCPKSAxlnYeuyX2zAksk/img.png&quot; data-alt=&quot;2025. 10. 30&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/oDYPB/dJMcaacWeJt/kKJCPKSAxlnYeuyX2zAksk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoDYPB%2FdJMcaacWeJt%2FkKJCPKSAxlnYeuyX2zAksk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;322&quot; height=&quot;169&quot; data-origin-width=&quot;322&quot; data-origin-height=&quot;169&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;2025. 10. 30&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;핼러윈 (10월 31일)에 아파트 경로당에서 팀 편성 이후 반년만에 활동을 실천할 수 있게 되었다.&lt;br&gt;&amp;nbsp;&lt;br&gt;학교를 마치고, 종이 치자 마자 4시에 경로당에 도착했다. 40분가량 할머니분들께 인사드리고, 한 분 한 분마다 앱 소개드리고 인터뷰를 찍는 과정을 거쳤다. &lt;a href=&quot;https://app.comong.xyz/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;소개드린 서비스 이용해 보기&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1094&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Fa6ef/dJMb99SDOHg/PlszbZSqfxTV1jcPr1FhTK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Fa6ef/dJMb99SDOHg/PlszbZSqfxTV1jcPr1FhTK/img.png&quot; data-alt=&quot;2025. 10. 31&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Fa6ef/dJMb99SDOHg/PlszbZSqfxTV1jcPr1FhTK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFa6ef%2FdJMb99SDOHg%2FPlszbZSqfxTV1jcPr1FhTK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;470&quot; height=&quot;627&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1094&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;2025. 10. 31&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이때 난관에 부딪혔다. '많은 기능을 한 번에 이용할 수 있게 도와드리자'는 목표는 취지는 좋았지만, 너무 많은 말을 하고 있었다.&lt;br&gt;&amp;nbsp;&lt;br&gt;하루 시작과 회고, 오늘의 운세, 유용한 기능, 채팅방, AI와 대화까지. 많은 기능들을 제한된 시간 안에 스무 명 남짓 분들께 소개해 드리는 건 쉬운 일이 아니었다. 무엇보다 우리가 간과한 것이 있었다. 어르신들께 스마트폰은 앱을 이용하는 기기가 아니라, 전화와 카카오톡 도구에 가까웠다.&lt;br&gt;&amp;nbsp;&lt;br&gt;따라서 우리는 2회 차 세션을 준비하며, 빼기(Subtracting)에 초점을 맞추었다. 기능을 세분화 및 단순화하여 어르신들이 '즐길 수 있는' 서비스를 만들고 다시 찾아오자고 결심했다.&lt;br&gt;&lt;br&gt;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;가장 중요한 건 상대방의 눈높이! 코몽오목&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://omok.comong.xyz/&quot; target=&quot;_blank&quot;&gt;&lt;span&gt;https://omok.comong.xyz/&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;&lt;figure data-ke-type=&quot;opengraph&quot; data-og-title=&quot;코몽오목 - 손쉽고 간단한 오목 게임&quot; data-ke-align=&quot;alignCenter&quot; data-og-description=&quot;간단한 입문용 오목 앱, 코몽오목! 쉬운 조작이 가능합니다. 혼자서 인공지능과 플레이하거나, 두 명이 함께 한 대 또는 두 대의 스마트폰으로 오목을 두세요.&quot; data-og-host=&quot;comong-omok.vercel.app&quot; data-og-source-url=&quot;https://omok.comong.xyz/&quot; data-og-image=&quot;https://blog.kakaocdn.net/dna/mNR3m/hyZRliy2Sz/AAAAAAAAAAAAAAAAAAAAACN6lulO5OYCDHdXydA9uu3CGAEpuQa3WeBnfHHvUek5/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&amp;amp;expires=1769871599&amp;amp;allow_ip=&amp;amp;allow_referer=&amp;amp;signature=EkhQk1ieey%2Bimbs3MLdpxFNbVaw%3D&quot; data-og-url=&quot;https://comong-omok.vercel.app/&quot;&gt;&lt;a href=&quot;https://comong-omok.vercel.app/&quot; target=&quot;_blank&quot; data-source-url=&quot;https://omok.comong.xyz/&quot;&gt;&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://blog.kakaocdn.net/dna/mNR3m/hyZRliy2Sz/AAAAAAAAAAAAAAAAAAAAACN6lulO5OYCDHdXydA9uu3CGAEpuQa3WeBnfHHvUek5/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&amp;amp;expires=1769871599&amp;amp;allow_ip=&amp;amp;allow_referer=&amp;amp;signature=EkhQk1ieey%2Bimbs3MLdpxFNbVaw%3D')&quot;&gt; &lt;/div&gt;&lt;div class=&quot;og-text&quot;&gt;&lt;p class=&quot;og-title&quot;&gt;코몽오목 - 손쉽고 간단한 오목 게임&lt;/p&gt;&lt;p class=&quot;og-desc&quot;&gt;간단한 입문용 오목 앱, 코몽오목! 쉬운 조작이 가능합니다. 혼자서 인공지능과 플레이하거나, 두 명이 함께 한 대 또는 두 대의 스마트폰으로 오목을 두세요.&lt;/p&gt;&lt;p class=&quot;og-host&quot;&gt;comong-omok.vercel.app&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;&lt;/figure&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;앞선 활동을 통해 가장 분명하게 느낀 점은, 서비스의 완성도보다 &lt;b&gt;사용자의 눈높이&lt;/b&gt;가 훨씬 중요하다는 사실이었다. 내가 고민했던 Firebase 데이터베이스나 Genkit 모듈을 어떻게 사용할까? 등의 기술적인 구현은 실제 사용자에게는 알 바가 아니다. 중요한 것은 설명 없이도 사용할 수 있는가, 즉 사용자 경험이었다.&lt;br&gt;&amp;nbsp;&lt;br&gt;경로당에 처음 들어갔을 때, 어르신들이 화투 같은 게임을 즐기고 있으셨다. 그래서 선택한 것이 ‘오목’이었다.&lt;br&gt;회원가입이 필요 없고, 복잡한 메뉴도 없으며, 화면을 켜는 순간 바로 이해할 수 있는 게임. 버튼의 수를 최소화하고, 조작 방식도 최대한 단순하게 구성했다. 새로운 기능을 추가하는 대신, &lt;b&gt;설명하지 않아도 되는.&lt;/b&gt;&lt;br&gt;&amp;nbsp;&lt;br&gt;저번에는 플랫 디자인을 중점으로 두었었다면, 이번 차례에선 '어르신들이 누를 수 있는 것이라고 인식할 수 있게' 만들어야 했다. 버튼에 그림자를 추가하고, 돌을 두면 '딱' 소리가 나게 구성했다.&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;387&quot; data-origin-height=&quot;449&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ro5p3/dJMcagc9KuT/nwc2fRxkFy6LveyMPGJePk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ro5p3/dJMcagc9KuT/nwc2fRxkFy6LveyMPGJePk/img.png&quot; data-alt=&quot;https://omok.comong.xyz/play/board?mode=friend-local&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ro5p3/dJMcagc9KuT/nwc2fRxkFy6LveyMPGJePk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fro5p3%2FdJMcagc9KuT%2Fnwc2fRxkFy6LveyMPGJePk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;387&quot; height=&quot;449&quot; data-origin-width=&quot;387&quot; data-origin-height=&quot;449&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;https://omok.comong.xyz/play/board?mode=friend-local&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;또 이 서비스를 만든 이후 경로당에 가기 전에, 우리 학교 친구들을 대상으로 베타 테스트 격의 체험을 진행했다. 나름 괜찮은 반응에 더 자신감을 얻고, 경로당에 한번 더 찾아갔다. 이전보다 확실히 잘 이해해 주시고, 즐기시는 게 느껴졌다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;749&quot; data-origin-height=&quot;423&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dsyvOU/dJMcaacWe6P/cgCDX0OnpiUKdohr6l9ebk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dsyvOU/dJMcaacWe6P/cgCDX0OnpiUKdohr6l9ebk/img.png&quot; data-alt=&quot;경로당 테이블, 2025. 11. 13&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dsyvOU/dJMcaacWe6P/cgCDX0OnpiUKdohr6l9ebk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdsyvOU%2FdJMcaacWe6P%2FcgCDX0OnpiUKdohr6l9ebk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;749&quot; height=&quot;423&quot; data-origin-width=&quot;749&quot; data-origin-height=&quot;423&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;경로당 테이블, 2025. 11. 13&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;한번 더! 코몽운세와 코몽퀴즈로 세 번째 방문&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;여기에 그치지 않고, 11월 중반에 서비스를 더 만들었다. 그리고, 12월 1일에 당일에 약속을 잡고 한번 더 방문했다.&lt;br&gt;&amp;nbsp;&lt;br&gt;학교 CP 시간에 향후 계획에 대해 얘기를 하던 중, 오늘 방문할 건지에 대해 대화가 오갔다. 4시간 만에 계획하고 1시간 만에 준비해서 경로당에 간다는 어이없는 생각, 놀랍게도 해냈다.&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1106&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dllsLe/dJMcahQFyoz/5Sw2vrsgEKeROKYIXTN9U1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dllsLe/dJMcahQFyoz/5Sw2vrsgEKeROKYIXTN9U1/img.png&quot; data-alt=&quot;2025. 12. 1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dllsLe/dJMcahQFyoz/5Sw2vrsgEKeROKYIXTN9U1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdllsLe%2FdJMcahQFyoz%2F5Sw2vrsgEKeROKYIXTN9U1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;505&quot; height=&quot;559&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1106&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;2025. 12. 1&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;&amp;nbsp;&lt;br&gt;코몽퀴즈 (Comong Quiz)는 두뇌 활성화를 목표로, 닌텐도 스위치 '매일매일 두뇌 트레이닝'과 언어 학습 서비스 듀오링고 (Duolingo), 선생님들이 쓰시는 Kahoot 플랫폼 등에서 아이디어를 얻은 하루 3개 퀴즈 서비스다. 4지선다 객관식 문제를 맞히고, 맞힌 문제 개수마다 꽃을 얻어 정원을 가꾸는 게이미피케이션 (Gamification) 요소도 도입했다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;719&quot; data-origin-height=&quot;557&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/qjIuj/dJMcagEfe8D/mHj5aIkDeYlmYRJKW1tBs0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/qjIuj/dJMcagEfe8D/mHj5aIkDeYlmYRJKW1tBs0/img.png&quot; data-alt=&quot;https://quiz.comong.xyz/quiz/play?category=General%20Knowledge 스크린샷&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/qjIuj/dJMcagEfe8D/mHj5aIkDeYlmYRJKW1tBs0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqjIuj%2FdJMcagEfe8D%2FmHj5aIkDeYlmYRJKW1tBs0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;601&quot; height=&quot;466&quot; data-origin-width=&quot;719&quot; data-origin-height=&quot;557&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;https://quiz.comong.xyz/quiz/play?category=General%20Knowledge 스크린샷&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;br&gt;코몽운세 (Comong Luck)는 Gemini 2.5로 긍정적인 운세를 만들어주는 서비스이다. 좋은 운세가 좋은 하루를 보장한다고 함부로 말할 수는 없지만, 좋은 운세 덕에 활기찬 기운을 얻으면, 그날이 실제로 좋아질 수 있는 것 아닐까? 어르신들이 이 서비스를 가장 좋아하셨기도 하다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;788&quot; data-origin-height=&quot;198&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ba5uXG/dJMcai9O9sw/VzHJ0WTaj83nQkRVUzP2b0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ba5uXG/dJMcai9O9sw/VzHJ0WTaj83nQkRVUzP2b0/img.png&quot; data-alt=&quot;https://luck.comong.xyz/ 스크린샷&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ba5uXG/dJMcai9O9sw/VzHJ0WTaj83nQkRVUzP2b0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fba5uXG%2FdJMcai9O9sw%2FVzHJ0WTaj83nQkRVUzP2b0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;788&quot; height=&quot;198&quot; data-origin-width=&quot;788&quot; data-origin-height=&quot;198&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;https://luck.comong.xyz/ 스크린샷&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;br&gt;온 가족 X (트위터), CoMemory&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;마지막 프로젝트와 발표 PPT가 어느 정도 완성되고 나서, 진짜 마지막 (찐막)으로 하나만 더 해보고 싶어, X (Twitter)와 Threads를 레퍼런스 한 SNS 서비스를 만들었다.&lt;br&gt;경로당에서 소개해드리지는 못했지만, 후술 할 성과 발표회에서 발표하고, 홈페이지에 게시해 놓았다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;627&quot; data-origin-height=&quot;234&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/GylIg/dJMcaaqtbnR/GhVo9ftWiwH0PIZNpBIbp1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/GylIg/dJMcaaqtbnR/GhVo9ftWiwH0PIZNpBIbp1/img.png&quot; data-alt=&quot;건전한? 온세대 SNS를 표방하며, https://x.comong.xyz 스크린샷&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/GylIg/dJMcaaqtbnR/GhVo9ftWiwH0PIZNpBIbp1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGylIg%2FdJMcaaqtbnR%2FGhVo9ftWiwH0PIZNpBIbp1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;627&quot; height=&quot;234&quot; data-origin-width=&quot;627&quot; data-origin-height=&quot;234&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;건전한? 온세대 SNS를 표방하며, https://x.comong.xyz 스크린샷&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;최종 발표와 마무리&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;크리스마스이브에 학교 대강당에서 학생, 학부모, 외부 인사 분들을 초청하여 '공동체 프로젝트 성과 발표회'를 진행하며, 약 8개월에 거친 이 프로젝트와 서비스에 마침표를 찍었다.&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;866&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/y0V72/dJMcabXdGFo/F6YCJGtkHGYHQRdUyW2WUK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/y0V72/dJMcabXdGFo/F6YCJGtkHGYHQRdUyW2WUK/img.png&quot; data-alt=&quot;언제나 따봉.. 2025. 12. 24&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/y0V72/dJMcabXdGFo/F6YCJGtkHGYHQRdUyW2WUK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fy0V72%2FdJMcabXdGFo%2FF6YCJGtkHGYHQRdUyW2WUK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;498&quot; height=&quot;431&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;866&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;언제나 따봉.. 2025. 12. 24&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1176&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kZCbQ/dJMcahC7jbM/ZlU76u9KNlW7BeijtxT451/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kZCbQ/dJMcahC7jbM/ZlU76u9KNlW7BeijtxT451/img.png&quot; data-alt=&quot;셀피.. 2025. 12. 24&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kZCbQ/dJMcahC7jbM/ZlU76u9KNlW7BeijtxT451/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkZCbQ%2FdJMcahC7jbM%2FZlU76u9KNlW7BeijtxT451%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;406&quot; height=&quot;541&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;1176&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;셀피.. 2025. 12. 24&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;100% 영어로 진행된 발표기에 조금 떨기도 했지만, 나름 만족할만하게 스피치 한 것 같아서 뿌듯했다.&lt;br&gt;&amp;nbsp;&lt;/p&gt;&lt;h4 data-ke-size=&quot;size20&quot;&gt;마치며&lt;/h4&gt;&lt;p data-ke-size=&quot;size16&quot;&gt;한해, 공부뿐만 아니라 프로젝트 영역에서도 많이 노력했다는 걸 알 수 있었다. 기존 서비스들은 혼자 만들어보는 것에 그쳤다면, 이번에는 실제 사용하시는 분들도 계셨다. 또 친구들과 여정하듯, 중간에 힘든 과정도 있었지만 이겨내고 좋은 성과를 이끌어 나갈 수 있었다. 나 자신이 자랑스럽기도 하고, 모둠원들에게 고맙기도 했다.&lt;br&gt;&amp;nbsp;&lt;br&gt;고등학교에 진학해서도, 코몽 웹 사이트와 서비스들은 내리지 않고 보존할 계획이다. 더 이상의 기능 추가나 홍보는 없겠지만, 생각날 때마다 접속해서 구경해 보면 중학교 때 노력했던 게 생각나지 않을까?&lt;br&gt;&amp;nbsp;&lt;br&gt;다른 앱이나 웹 페이지를 개발하지 않으면, 이 글이 10대 마지막 글일 수도 있겠다. 그렇지만.. 코딩은 언제나 재미있기 때문에 공부도 중요하긴 하지만, 올해나 내년에도 이와 비슷한 기회가 있었으면 좋겠다. 그러면, 앞으로는 다음 프로젝트와 글을 준비해 보도록 하겠다! 읽어주셔서 감사합니다!&lt;/p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1669&quot; data-origin-height=&quot;961&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/n267j/dJMcabJHrLD/hXkurKRnzP9jZm06ePZZF0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/n267j/dJMcabJHrLD/hXkurKRnzP9jZm06ePZZF0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/n267j/dJMcabJHrLD/hXkurKRnzP9jZm06ePZZF0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fn267j%2FdJMcabJHrLD%2FhXkurKRnzP9jZm06ePZZF0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1669&quot; height=&quot;961&quot; data-origin-width=&quot;1669&quot; data-origin-height=&quot;961&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;</description>
      <category>개발일지/코몽</category>
      <category>개발</category>
      <category>개발수기</category>
      <category>개발일지</category>
      <category>개발자</category>
      <category>웹</category>
      <category>일기</category>
      <category>중학교</category>
      <category>코딩</category>
      <category>코몽</category>
      <category>프로그래밍</category>
      <author>Seeun Kim</author>
      <guid isPermaLink="true">https://seeunkim.tistory.com/1</guid>
      <comments>https://seeunkim.tistory.com/entry/%EC%BD%94%EB%AA%BD-%EA%B0%9C%EB%B0%9C-%EC%88%98%EA%B8%B0-%EC%A4%91%ED%95%99%EA%B5%90-3%ED%95%99%EB%85%84%EC%9D%B4-%EC%9B%B9-%EC%84%9C%EB%B9%84%EC%8A%A4%EB%A5%BC-%EC%B6%9C%EC%8B%9C%ED%95%A0-%EC%88%98-%EC%9E%88%EC%9D%84%EA%B9%8C#entry1comment</comments>
      <pubDate>Sun, 11 Jan 2026 15:51:18 +0900</pubDate>
    </item>
  </channel>
</rss>