새 탭만 열어도 공부하고 싶은 귀차니즘으로 만든 크롬 확장 프로그램 디룩(Delook)

새 탭만 열어도 .. 공부할 수 있다면..?

우연히 30 Seconds of Knowledge라는 크롬 확장 프로그램을 알게 됐고, 한동안 잘 썼다.
새 탭마다 짧은 코드 지식을 보여주는 방식이 가볍고 괜찮았다.

이걸 한국어 버전으로 나만의 고민들을 조금 더 녹여서 변형해보고 싶다는 생각이 들었다.
+ 다른 사람들과도 지식을 공유하고 함께 공부할 수 있는 오픈 커뮤니티로 확장되면 더 재밌지 않을까? 하는 바람도 생겼다.

📦 확장 프로그램(메인): 크롬 웹스토어
🌐 웹사이트: https://www.delook.co.kr
🤖 깃허브 : https://github.com/delook-dev

디룩은요 ,.,

디룩(Delook)은 브라우저 새 탭에서 프로그래밍 지식을 학습할 수 있도록 돕는 크롬 확장 프로그램이다.
새 탭을 열 때마다 내가 정리한 학습 내용이나 다른 사람들이 공유한 지식을 볼 수 있어서, 굳이 따로 찾아보지 않아도 공부할 수 있는 환경을 만들어준다.

디룩(Delook)이라는 이름의 뜻은 ..
De(Develop) + Look = Delook
+ "지식으로 뇌를 디룩디룩 찌우다" 라는 중의적인 의미도 담았다 ㅎㅅㅎ

디룩의 주요 콘텐츠는?

디룩에서 보여주는 콘텐츠로는 아래 두가지를 생각하고 있다.

1. 기술 인터뷰 Q&A
   기술 인터뷰에서 자주 나오는 질문과 답변을 짧고 간단하게 정리한 내용들.
   아마 백엔드, 프론트로 나누어 지지 않을까 싶다. 요청이 생긴다면 분야는 더 확장해도 좋을 것 같다.

2. 프로그래밍 기본 개념

   • CS 기초: 자료구조, 네트워크, 운영체제 등 개발자라면 반드시 알아야 할 기본기
   • 알고리즘: 자주 쓰이는 알고리즘과 그 핵심 로직 정리
   • 프로그래밍 언어 & 프레임워크: JavaScript, React, Java 등 주요 언어와 프레임워크 개념, 실무에서 바로 활용 가능한 코드 스니펫과 팁

현재는 FE-INTERVIEW (프론트엔드 기술인터뷰)와 JAVASCRIPT만 등록되어 있고, 점점 확장할 예정이다.

- 콘텐츠 관리 방식

디룩의 콘텐츠는 프로젝트 레포지토리에 MDX 파일 형태로 작성해 활용한다.
각 파일에는 제목, 카테고리, 태그 등 metaData가 포함돼 있고, 이 정보를 기반으로 화면에 노출된다.
작성된 MDX는 내부에서 import해 사용자에게 보여주는 방식으로 동작한다.
덕분에 새로운 콘텐츠의 추가나 수정도 깃허브에서 간단하게 할 수 있다.

이런식으로 MDX를 작성하면 화면에 노출된다.
형식을 일치시키기 위해 템플릿도 마련해놨다죠 .. ㅎ

왜 .. 오픈소스 프로젝트냐고요..?

디룩은 단순한 개인 프로젝트로 끝내고 싶지 않았다.
처음엔 내가 쓰려고 만들었지만, 만들다 보니 다른 개발자들과 함께 만들면
더 재밌고, 더 나은 방향으로 발전할 것 같았다,.

그래서 디룩을 오픈소스 프로젝트로 운영하기로 했다.
그 이유는 혼자 만드는 것 보다 많은 사람들과 함께 만들때 더 알찬 콘텐츠가 채워지고,
다른 개발자들이 정리한 지식을 공유하고 나누다 보면 서로 자극을 받고 배우게 될 것 같았다.
서로 배우고 동기부여가 되는, 쓸모있는 학습 공간을 만들고 싶다.

그리고 조만간 기수제로 사람들을 모집해서 기여를 받는 방식으로 발전시켜볼 생각이다. (아직 계획일 뿐 ..)

오픈소스 깃헙 주소

화면 구성

메인 페이지 (Main)

메인 페이지에 진입하면 깃허브에 등록된 프로그래밍 개념이 랜덤으로 노출된다.
“새로 불러오기” 버튼으로 다른 콘텐츠를 로드할 수 있고,
마음에 드는 콘텐츠는 북마크해두었다가 나중에 다시 볼 수 있다.

전체보기 페이지 (Archive)

등록된 모든 콘텐츠들을 모두 볼 수 있는 페이지이다.

북마크 페이지 (Bookmark)

저장해둔 콘텐츠만 모아서 볼 수 있는 페이지다.
자주 복습하고 싶은 개념은 여기서 빠르게 확인할 수 있다.

추가 기능

다크모드/라이트모드 선택,카테고리 필터링도 가능하다는 점!

여기까지가 디룩 소개 끝.. ⭐️
언젠가 개발자들이 애용하는 서비스가 되면 좋겠다..

콘텐츠 기여자 모집 예정

앞으로는 디룩을 함께 만들어나갈 기여자들을 모집할 계획입니다 ..!
아직 구체적인 일정은 정해지지 않았지만,
함께 운영을 도와줄 친구들과 논의를 거쳐 기수제 방식으로 기여자를 모집하고 공지를 올릴 예정입니다.

관심 있는 분들은 미리 눈여겨봐 주세요…!

📎 주소 모음

📦 확장 프로그램(메인): 크롬 웹스토어
🌐 웹사이트: https://www.delook.co.kr
🤖 깃허브 : https://github.com/delook-dev

다음 글에서는 디룩을 어떻게 만들었는지, 개발 이야기를 써볼 예정 ...