문지웅

문지웅님의 아티클

문지웅

문지웅

ReadMagic: README 작성의 마법, 그리고 그 뒤의 이야기

안녕하세요, 프론트엔드 개발자 문지웅입니다.

오늘은 제가 최근에 런칭한 'ReadMagic'에 대해 이야기하려 합니다.

README 작성을 도와주는 이 도구의 탄생 과정과 그 과정에서 얻은 교훈들을 나누고 싶습니다.

ReadMagic의 탄생 배경

모든 개발자가 공감하시겠지만, 프로젝트를 시작할 때마다 README 작성은 항상 필요한 일이었습니다. "이번에야말로 체계적으로 작성해야지"라고 다짐하지만, 매번 비슷한 내용을 반복해서 쓰는 자신을 발견하곤 했죠.

이런 고민 끝에 탄생한 것이 바로 ReadMagic입니다.

프로젝트의 기본 정보만 입력하면 구조화된 README 초안을 자동으로 생성해주는 웹 서비스입니다.

개발 과정의 도전과 교훈

  1. 완벽주의 극복하기: 완벽한 README 템플릿을 만들려다 출시가 계속 미뤄졌습니다. 결국 "완벽함보다는 유용함"을 목표로 삼고 MVP(Minimum Viable Product)를 출시하기로 결정했어요.

  2. AI 활용의 양면성: 초기에는 AI를 활용해 더 "똑똑한" README 생성을 구현하려 했습니다. 하지만, 과도한 AI 의존은 오히려 사용자의 창의성을 제한할 수 있다는 점을 깨달았습니다.

ReadMagic은 어떻게 작동하나요?

1. 프로젝트 정보 입력: 프로젝트 이름, 설명, 필요한 Node.js 버전, 주요 기능 등을 입력합니다.

2. 자동 생성: 입력된 정보를 바탕으로 README 초안을 작성합니다.

ReadMagic의 현재와 미래

현재 ReadMagic은 기본적인 README 생성 기능을 제공하고 있습니다.

하지만 여기서 멈추지 않을 계획입니다.

향후 계획

  • 생성 결과에 대한 커스터마이징 제공

  • 다양한 프로젝트 유형별 템플릿 제공

  • 사용자 커스텀 템플릿 저장 기능

마치며: 개발자로서의 성장

ReadMagic을 개발하면서 가장 크게 느낀 점은 "문제 해결"이 개발의 핵심이라는 것입니다. 단순히 코드를 작성하는 것이 아니라, 실제 사용자의 고민을 해결하는 과정에서 진정한 가치가 생긴다는 것을 배웠습니다.

여러분도 ReadMagic을 사용해보시고, 여러분만의 문제 해결 도구를 만들어보는 건 어떨까요? 때로는 작은 아이디어가 큰 변화를 만들어낼 수 있습니다.

ReadMagic과 함께 더 나은 개발 문화를 만들어가길 희망합니다. 여러분의 의견과 제안을 언제나 환영합니다. 함께 성장해 나가요!

ReadMagic 바로가기

ReadMagic

ReadMe 초안을 빠르게 작성해주는 서비스
10
4
문지웅

문지웅

Arc for Windows!

디스콰이엇 통해서 알게 된 Arc 브라우저가 맥만 지원해서 아쉬웠었는데

윈도우도 정식 출시되었네요 :)

아직 많이 써본 건 아니지만, 맘에 들어서 글 남겨 봅니다 👍👍

3
0
문지웅

문지웅

Merry Christmas

즐거운 화이트 크리스마스 보내세요 🎄

1000010239.png

  • 이미지는 뤼튼으로 만들고, 텍스트를 추가했습니다 :)

2
0
문지웅

문지웅

What if? 디스콰이엇이 이렇게 바뀐다면?

1. 게시글 정렬 기능이 프로필 설정으로 이동한다면?

게시글 정렬 버튼 고정과 관련해서 이전에 의견 제시한 적이 있엇는데

약간의 버그가 있는 걸로 보여져서요 😭

(Ex. 선택된 버튼과 게시글 목록이 다름)

링크드인처럼 설정 화면에서 고정하는 기능으로 변경한다면 어떨까요??

2. 모바일 등 작은 화면에서의 최신 프로덕트 보기 방식

하나씩 보이는 것도 좋지만 버튼 등을 추가해서 모달 또는 아래에 리스트가 나오는 건 어떨까요??

6
2
문지웅

문지웅

스릴팝 후기

@이혜환 님 덕분에 신당동에서 진행하는 스릴팝 (스타트업 릴레이 팝업) 행사를 알게 되었습니다.

행사는 신당동에 있는 Va gallery에서 진행하고 있고, 총 3층으로 구성되어있고,

1층에는 tv로 만든 전시와 카페가 있었고, 2층은 사무실처럼 꾸며져 있었습니다.

3층에서는 행사에 참여한 스타트업 기업들의 제품을 사용해 볼 수 있었습니다.

5개의 제품 중에서, Meshed, Markhub, Binder HR 3 제품을 사용해봤습니다.

(이미 사용 중인 Summary나, 사용 고려 중인 Walla는 담당자 분이 안계셨어요😭)

제품을 직접 사용해보고 사용하면서 느낀 피드백도 나눌 수 있었던 유익한 시간이었습니다.

체험을 마치고 1층에서 자체 제작한 사원증 굿즈도 받을 수 있었습니다. 😊

※ 행사 관련 자세한 정보는 아래 링크를 참고하시면 됩니다 :)

공식 사이트

+홍보글

10
7
문지웅

문지웅

Astro로 blog 만들어보기

Astro 공식 문서 및 블로그를 만들었던 경험 등을 토대로, gitbook을 사용해서, Astro로 블로그를 만드는 방법에 대한 튜토리얼을 작성해보았습니다. 추가했으면 하는 내용이 있다면 댓글 남겨 주세요 :)

0
2
문지웅

문지웅

디콰의 UI가 이렇게 바뀐다면 어떨까요...?

  • 메이커로그 정렬의 기준이 추천 순보다 최신 순이 기본값이었으면 좋겠습니다. (아니면, 사용자가 고정할 수 있으면 좋겠습니다.😊)

  • 우측 패널들이 탭으로 구분되서 스크롤 내리지 않고도 모두 확인할 수 있으면 좋겠습니다 🤩

지극히 개인적인 의견이므로 부담 없이 읽고 지나가 주세요 :)

그럼 이만~ 월요팅입니다!

8
7
문지웅

문지웅

이런 디자인은 어떤가요...?

여러분은 어떤 디자인을 선호하시나요???

포트폴리오의 UI를 수정해보았는데요

여러분의 의견이 궁금해서 글 남겨봐요 😎

기존 디자인은 https://woongsnote-portfolio.vercel.app 에서 확인하실 수 있고,

신규 디자인은 https://portfolio-git-dev-woongsnote.vercel.app/ 에서 확인 가능해요 :)

많은 의견 부탁드려요.

감사합니다.

0
7
문지웅

문지웅

블로그에 thumbnail이 필요할까요???

블로그의 내용도 중요하지만, UI 또한 중요하다고 생각해요

기술 블로그마다 디자인도 조금씩 다르고요

블로그의 섬네일에 대한 여러분의 생각이 궁금하네요 👀

4
5
문지웅

문지웅

Astro 생각보다 매력적이네 :)

기술 블로그와 관련해서 검색하던 중, 우연히 Astro에 대해 알게 되었다.

Contentlayer가 몇 달쨰, 업데이트가 없어, 고민하던 찰나에 알게 된 프레임워크였고, Next.js 보다 성능적으로 우수하다는 홈페이지의 내용이 관심을 끌어서 블로그에 적용해보게 되었다.

기존 Next.js + ContentLayer 때보다, 게시글을 추가했음에도 빌드 시간은 줄어들었고, 사이트도 더 빠릿빠릿해졌다는 느낌을 받았다.

공식 홈페이지도 잘되어있고, Integration 등으로 기존 React 코드도 사용이 가능한 점 등 장점이 많다고 생각이 들어서, 블로그는 이 프레임워크를 기반으로 계속 사용하면서 개선하나가려고 한다.

아직 100프로 전환된 상태는 아니라, 일부 기능들은 수정 중인 상황이지만 상당히 매력적인 프레임워크로 생각되서 글로 남긴다. :)

구현된 블로그 미리보기 ▼

www.woongsnote.dev_ (5).png

기술 블로그

개발 관련 학습한 지식을 공유하기 위해 직접 구현한 블로그
0
1
문지웅

문지웅

ASTRO..?

기술 블로그와 관련해서 검색하던 중. Astro 라는 프레임워크를 알게 되었습니다. 기존에 next.js 로 구현했던 블로그를 해당 프레임워크로 전환 중입니다 😎

혹시 이 프레임워크 써 보신 분 계신가요 ~~???

0
2
문지웅

문지웅

Happy Halloween 🎃

1000000245.jpg
0
2
문지웅

문지웅

섬네일 이미지를 자동으로 생성하기 (with @vercel/og)

블로그에 글을 작성할 때, 섬네일(thumbnail)을 매번 직접 만드는 것은 추가적인 비용이 필요한 작업입니다. 이를 해결하기 위해 미니픽(https://mini-pick.vercel.app)을 직접 만들었지만, 제목 등을 직접 입력해야 해서, 자동화하면 어떨까 하는 needs가 생겼습니다.

`@vercel/og` 라이브러리를 도입해서 자동으로 이미지를 생성하도록 해서 이를 해결할 수 있었습니다.

※ Next.js 13 + App Router 버전 기준입니다.

공식 문서를 참고해서, app 디렉토리에 og 폴더를 만들고, route.tsx 파일을 생성하고, 아래와 같이 구현했습니다.

// app/og/route.tsx
import { ImageResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url);

    const hasTitle = searchParams.has('title');
    const title = hasTitle
      ? searchParams.get('title')?.slice(0, 100)
      : 'Woongsnote';

    const size = { width: 1200, height: 630 };

    return new ImageResponse(
      (
        <div
          style={{
            height: '100%',
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            backgroundImage:
              'linear-gradient(to bottom right, #00C0FF, #4218B8)',
            fontSize: 64,
            fontWeight: 600,
          }}
        >
          <div style={{ color: 'white' }}>{title}</div>
        </div>
      ),
      {
        ...size,
      },
    );
  } catch (error) {
    return new Response(`Failed to generate the Image`, { status: 500 });
  }
}
```

Next.js의 Metadata API 기준으로 해당 이미지를 Open-graph image로 사용하려면, 아래와 같이 호출하면 됩니다.

    openGraph: {
      images: [
        {
          url: `/og?title=${post.title}`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },

동일한 url로 섬네일로 사용하려고 했으나, 배포 환경에서 400 Error 를 만났습니다.

Next.js 의 Image를 사용하려다 보니, image에 대한 주소 설정이 안되어 있다고 생각되어 아래와 같이 config 파일에 remotepattern을 추가했습니다.

{
        protocol: 'https',
        hostname: '배포한 url 주소',
        port: '',
        pathname: '/og/**',
 },

또한, 이미지를 불러오는 url도 아래와 같이 수정했습니다.

src={`${배포한 url}/og?title=${title}`}

수정 후에 재배포한 결과, 정상적으로 동작하는 것을 확인할 수 있었습니다.

아래 블로그에서 실제로 생성된 섬네일을 확인할 수 있습니다.

감사합니다. 😊

0
2
문지웅

문지웅

Next.js로 구현해 본 LinkTree

우리가 만들게 될 결과물은 아래와 같습니다.

screely-1696143805516.png

1. 프로젝트 준비 및 생성

준비물: 프로필 이미지- 프로필 이미지로 사용할 이미지 파일 또는 주소가 필요합니다.

Next.js를 베이스로 만들 예정이므로 아래 명령어로 프로젝트를 생성합니다.

npx create-next-app@latest

## 2. 프로젝트 구현

이제 컴포넌트들을 구현하면 됩니다.

( ) 안의 내용은 제가 구현한 컴포넌트 이름들입니다. 😊

- 전체 컴포넌트들을 포함할 레이아웃 컴포넌트( ProfileCard.tsx )

- 프로필 이미지와 이름, 직업을 표시할 컴포넌트(UserInfo.tsx)

- 이미지 컴포넌트 (ProfileImage.tsx)

- 공유하려는 링크들을 표시할 컴포넌트(UserLinks.tsx)

- 각 링크에 대한 컴포넌트(LinkItem.tsx)

- 소셜 아이콘 모음 컴포넌트(SocialIcons.tsx)

- 각 아이콘에 대한 컴포넌트(LinkIcon.tsx)

import ProfileCard from "@/components/ProfileCard";

const USER_NAME: string = "woongsnote";

export default function Home() {

  return (
    <>
      <main className="flex h-screen flex-col items-center mx-auto text-white">
        <ProfileCard username={USER_NAME} />
      </main>
      <footer className="fixed bottom-0 w-full text-center pb-4 text-white px-2">
        <p> © 2023. 문지웅 | All rights reserved.</p>
      </footer>
    </>
  );
}

import SocialIcons from "./SocialIcons";
import UserInfo from "./UserInfo";
import UserLinks from "./UserLinks";

const ProfileCard = ({ username }: { username: string }) => {
  return (
    <div className="w-full space-y-8 max-w-lg px-4 items-center flex flex-col">
      <UserInfo username={username} />
      <UserLinks username={username} />
      <SocialIcons username={username} />
    </div>
  );
};

export default ProfileCard;

3. 프로젝트 배포

- 프로젝트에 불필요한 파일들을 제거하여, 프로젝트를 정리합니다.

- ex) vercel.svg, next.svg 등

- 이번 프로젝트의 경우, github가 제공해주는 github-pages를 활용해서 {username}.github.io 로 배포할 예정입니다.

- 배포를 위해 github actions을 적용할 예정입니다.

4. github actions 적용하기

프로젝트가 github에 업로드되고 나면, settings로 이동합니다.

Pages를 클릭하면, GitHub Pages를 확인하실 수 있습니다.

Source가 기본적으로, Branch로 설정하도록 되어 있을텐데, 이를 GitHub Actions로 변경합니다.

변경하게 되면, GitHub가 next.js 프로젝트임을 알고 해당 Actions을 추천해줍니다.

configure 버튼을 클릭해서 들어가면 yaml 파일을 확인할 수 있습니다.

여기서 한 가지 수정이 필요합니다.

현재 node의 LTS 버전은 18버전이므로, 16을 18로 수정해줍니다.

또한, next.config.js 파일을 아래와 같이 수정합니다.

/** @type {import('next').NextConfig} */

const nextConfig = {
  output: "export",
};

module.exports = nextConfig;

GitHub Pages는 기본적으로 jekyll 기반이므로, root 디렉토리에 .nojekyll 파일을 추가해줍니다.

수정한 next.config.js 파일과 .nojekyll 파일을 commit하고 push하면 정상적으로 동작할 것입니다.

완성한 프로젝트는 아래 링크에서 확인하실 수 있습니다.

긴 글 읽어주셔서 감사합니다. 😊

8
0