Develog 사용 가이드

기록이 쌓이면 실력이 보입니다. Develog는 여러분의 배움과 성장의 흔적을 한 곳에 축적하고, 성장 곡선을 시각적으로 보여주기 위한 블로그입니다.

 

💌 왜 글을 써야 하는지 궁금하시다면, 이 시리즈의 [1편 에세이 — AI 시대에도 결국 남는 것은 나의 기록이다]부터 읽어보세요.

---

1. 왜 Develog를 쓰나요?

일하면서, 공부하면서 배운 내용을 그냥 노션이나 메모장에 적어두면, 시간이 지나면 흩어집니다. Develog는 이 세 가지를 해결합니다.

• 히트맵으로 꾸준함이 증명됩니다. 매일 한 개씩만 써도 1년 뒤엔 파란색 365칸이 포트폴리오가 됩니다.
• 태그 그래프로 내 관심사가 드러납니다. 어떤 기술을 얼마나 자주, 어떻게 연결해 공부했는지 한눈에 보입니다.
• 링크 하나로 나를 소개할 수 있습니다. 내 프로필 URL만 공유하면 상대방이 내 성장 과정을 바로 확인할 수 있습니다.

---

2. 글 작성 가이드

2-1. 새 글 쓰기

오른쪽 상단 새 글 쓰기 버튼을 누르면 에디터가 열립니다.

2-2. 본문 에디터

Tiptap 기반 리치 텍스트 에디터입니다. 마크다운을 모르셔도 됩니다 — 버튼으로 전부 됩니다.

버튼	기능
B / I / U	굵게 / 기울임 / 밑줄
<>	인라인 코드
</>	코드 블록 (언어 하이라이트 지원)
🔗	링크 삽입
🖼	이미지 업로드 (드래그&드롭도 가능)
📋	표 삽입
- / 1.	글머리/번호 목록

💡 팁: 이미지는 드래그&드롭으로 바로 넣을 수 있고, 백그라운드에서 즉시 업로드되므로 임시저장 전이라도 사라지지 않습니다.

2-3. 사이드바 설정

오른쪽 사이드바에서 발행 정보를 입력합니다.

• 태그 — 여러 개 입력 가능. React, Next.js, TIL 처럼 관심 키워드를 적어주세요. (엔터로 추가)
• URL 슬러그 — 글 주소의 뒷부분 (/@내이름/어쩌구). 비워두면 제목에서 자동 생성됩니다.
• 요약 — 최대 200자. 비워두면 본문 앞부분으로 자동 채워집니다.
• 커버 이미지 — 피드/목록에 썸네일로 뜨는 이미지입니다.
• 컬렉션(시리즈) — 같은 주제로 묶을 글이 있다면 시리즈를 선택하세요. (자세한 내용은 7번 섹션 참고)

2-4. 임시저장 vs 출간

우측 상단에 버튼 두 개가 있습니다.

• 임시저장 👉 나만 볼 수 있는 초안으로 보관됩니다. 내 프로필 상단 임시 저장 섹션에만 뜹니다. 피드에는 노출되지 않아요.
• 출간하기 👉 모든 사람에게 공개됩니다. 피드/태그/검색에 등장합니다.

💡 팁: 공부하다가 끊기는 내용은 일단 임시저장 해두세요. 나중에 이어서 쓸 수 있고, 출간 전에 미리보기 버튼으로 실제 어떻게 보일지 확인할 수도 있습니다.

---

3. 내 프로필 - 이곳이 내 포트폴리오

상단 오른쪽 프로필 아이콘 → 내 이름을 누르면 이동합니다. 주소는 https://develog.kiweb.or.kr/@내아이디 형태입니다.

3-1. 활동 통계 (상단 카드)

• ✏️ 총 작성 — 지금까지 출간한 글 개수
• 🔥 연속 작성 — 오늘 기준 며칠째 쉼 없이 글을 쓰고 있는지 (streak)
• 📅 최장 연속 — 역대 최장 연속 작성 일수

3-2. 히트맵(Heatmap)

지난 365일 동안의 작성 활동을 요일 × 주 단위로 표시합니다.

• 색이 진할수록 그날 많이 썼다는 뜻입니다. (0 → 12 → 34 → 5개+ 로 4단계)
• 기준 시간대는 한국 시간(KST) — 자정을 넘기면 다음 날로 집계됩니다.
• 타일을 클릭하면 그날 출간한 글로 바로 이동합니다.

💡 팁: 하루 한 줄이라도 좋으니 매일 한 편씩 출간을 습관화 해보세요. 한 달 지나면 타일이 눈에 보이게 쌓입니다.

3-3. 임시 저장 섹션

내 프로필을 나만 볼 때 이 영역이 보입니다. 초안이 여기 쌓여 있으니, 다시 눌러서 이어 쓰시면 됩니다. 다른 사람에겐 안 보여요.

3-4. 고정 글 (Pinned)

각 글 카드 우측 상단 📌 핀 아이콘을 누르면 고정됩니다. 최대 3개까지.

• 고정한 글은 프로필 상단 고정 글 섹션에 큰 카드로 뜹니다.
• 내가 가장 자신 있는 글, 대표작, 최근 학습 결과물을 여기 꽂아두세요. 방문자가 제일 먼저 봅니다.

3-5. 전체 글 / 좋아요한 글 / 컬렉션 탭

프로필 중앙 탭에서 콘텐츠를 분류해 볼 수 있습니다.

• 전체 글 — 모든 출간 글이 최신순으로 나열됩니다. 그리드(3열) 기본, 원하면 리스트 뷰로 전환 가능합니다.
• 좋아요 — 내가 ❤️ 누른 글이 한 곳에 모입니다. 북마크처럼 활용하세요. 주소: /@내아이디/likes
• 컬렉션 — 내가 만든 시리즈 목록입니다. 주소: /@내아이디/collections

---

4. 태그 그래프 - 내 공부의 지도

프로필 상단 그래프 버튼을 누르면 나옵니다. 주소: /@내아이디/graph

• 큰 원 = 많이 쓴 태그 (React 주변에 글이 많으면 React 노드가 커집니다.)
• 연결선 — 같은 글에 함께 쓴 태그끼리 선으로 이어집니다.
• 노드를 클릭하면 해당 글로 이동합니다.

💡 왜 유용한가요?

• "나는 Frontend 위주인데 DevOps도 붙어 있네" 같은 식으로 내 관심 구조를 스스로 파악할 수 있습니다.
• 누가 보든 이 그래프만 봐도 "이 사람은 이런 주제를 깊게 파고드는구나" 하고 이해합니다.

---

5. 피드(홈) 활용법

 

홈 화면 상단에 탭이 4개 있습니다.

탭	설명
트렌딩	최신 출간 순서. 새 글이 바로바로 올라옵니다.
추천	로그인한 경우에만 보입니다. 내가 좋아요/조회한 글의 태그 가중치로 개인 맞춤 피드를 보여줍니다.
인기순	좋아요가 많은 글 순서
태그	태그 클라우드 + 태그별 탐색

오른쪽 아이콘으로 그리드 / 리스트 뷰 토글도 됩니다.

피드 상단에는 이어 읽기 카드도 자동으로 떠 있습니다. 마지막으로 보던 글이 있으면 한 번에 그 위치로 돌아갈 수 있습니다.

또한 상단 GNB의 돋보기 🔍 버튼을 누르면 검색 화면(/search)으로 이동합니다. 제목 / 요약 / 본문 / 태그를 통합 검색합니다.

---

6. 동영상 업로드

동영상은 유튜브 임베딩 기능을 이용해서 업로드 할 수 있습니다.

 

일부 공개 / 공개 상태로 동영상을 업로드 합니다.

 

생성된 동영상 링크를 본문에 붙여넣으면 Youtube 임베딩 (동영상 업로드)을 할 수 있습니다.

 

어떤 링크를 사용할 수 있나?

1. 주소창 URL
2. 게시물 옆 공유 버튼  
3. 공유 - 퍼가기 기능

---

7. 시리즈(컬렉션)로 글 묶기

연재 주제나 연결된 내용으로 글이 쌓이면 흩어져 보이기 마련입니다. 시리즈로 묶으면 한 줄로 정리되고, 독자는 1편부터 순서대로 읽을 수 있습니다.

7-1. 시리즈 만들기

새 글 작성 화면 오른쪽 사이드바 컬렉션 항목에서 시리즈를 새로 만들거나, 기존 시리즈에 이 글을 추가할 수 있습니다.

• 이름 — Next.js 마스터하기, 자료구조 30일 같은 시리즈 제목
• 공개 / 비공개 — 비공개 시리즈는 본인에게만 보이고, 시리즈 페이지에 자물쇠 라벨이 붙습니다.

7-2. 시리즈 상세 페이지

주소는 https://develog.kiweb.or.kr/@내아이디/c/시리즈슬러그 형태입니다.

• 글 목록 아코디언 — 시리즈에 묶인 모든 글이 순서대로 나옵니다.
• 이전 / 다음 글 버튼 — 글 상세 페이지 하단에서 같은 시리즈의 이전·다음 편으로 한 번에 이동할 수 있습니다.

💡 팁: 프로젝트 회고, "30일 습관 챌린지", "책 한 권 정리", "공부 일지" 처럼 묶어서 봐야 의미가 있는 글은 꼭 시리즈로 묶으세요. 방문자가 1편만 읽고 떠나지 않게 됩니다.

---

8. 글에 반응하기 - 좋아요, 공유, 댓글

8-1. 좋아요 / 공유

글 본문 하단의 ❤️ 와 공유 버튼입니다.

• ❤️ 좋아요 — 클릭하면 즉시 카운트가 올라갑니다. 비로그인 상태면 로그인 화면으로 이동합니다.
• 공유 — 현재 글 URL을 클립보드에 복사합니다. SNS/메신저에 그대로 붙여넣으면 커버 이미지와 요약이 함께 노출됩니다.

8-2. 댓글

본문 아래 댓글 영역에서 의견을 남길 수 있습니다.

• 답글 — 다른 댓글에 답글을 달면 트리 형태로 들여쓰기됩니다.
• 수정 / 삭제 — 본인이 쓴 댓글 오른쪽의 메뉴에서 가능합니다.
• 댓글 한 건당 최대 5,000자, 텍스트 전용입니다.

💡 팁: 좋은 글을 만났다면 ❤️ 좋아요 한 번, 그리고 한 줄 댓글을 남겨주세요. 작성자에게 가장 큰 동기부여가 됩니다.

---

9. 글에 다이어그램 넣기 (Mermaid)

코드만으로 설명이 부족할 때는 Mermaid 다이어그램을 본문에 바로 그릴 수 있습니다.

본문에서 </> 코드 블록 버튼을 누른 뒤, 블록 좌측 상단의 언어 드롭다운에서 Mermaid 를 선택합니다. 그러면 코드 대신 다이어그램이 자동으로 렌더링됩니다.

• flowchart, sequenceDiagram, classDiagram, gantt 등 Mermaid 공식 문법 전부 사용 가능합니다.
• 코드 블록 언어를 일반 언어(typescript, python 등)로 두면 평소처럼 syntax highlight가 적용됩니다.

💡 팁: 업무 흐름도, 일정표, 관계도, 시스템 구조를 그릴 때 Mermaid가 가장 빠릅니다. 캡처 이미지보다 가독성이 좋고, 수정도 쉽습니다.

---

10. 설정 & 계정 관리

내 프로필 카드 우측 상단의 ⚙️ 설정 버튼을 누르면 설정 페이지로 이동합니다.

10-1. 프로필 설정

항목	설명
프로필 이미지	정방형 권장 (jpg/png/webp)
닉네임	프로필·댓글에 노출되는 이름
사용자 아이디(username)	URL /@아이디에 쓰이는 값. 일정 횟수 이내에서 변경 가능하며, 이전 아이디로 접속해도 자동 리다이렉트됩니다.
한 줄 소개	최대 200자
이메일	소셜 로그인 계정은 변경 불가

10-2. 회원 탈퇴

설정 페이지 하단의 회원 탈퇴 버튼에서 진행할 수 있습니다.

• 탈퇴 즉시 프로필과 글이 비공개로 전환됩니다.
• 30일 이내에는 운영팀에 문의해 복구가 가능합니다.
• 30일 이후에는 계정이 자동으로 익명화되며, 작성한 글과 댓글은 보존됩니다(익명 사용자 명의).

⚠️ 주의: 탈퇴 후 30일이 지나면 같은 계정으로 복구할 수 없습니다. 한 줄이라도 미련이 남는다면 잠시 보류하시고 운영팀에 의견을 먼저 보내주세요.

---

✅ 권장 활용법

1. TIL(Today I Learned)로 시작하세요. 거창하게 쓰려 하지 마시고, 그날 배운 것 1~3줄이라도 올려보세요. → 타일이 쌓입니다.
2. Before → After 변화 기록을 남겨보세요. "이전엔 이렇게 했는데, 지금은 이렇게 바뀌었습니다" 형식은 어떤 자리에서든 성장 스토리로 바로 연결됩니다.
3. 태그를 꾸준히 붙이세요. 최소 2~3개. 나중에 그래프가 의미 있게 그려집니다.
4. 대표작 3개는 핀을 꽂으세요. 방문자가 1초 안에 "이 사람 뭐 하는 사람" 판단하게 됩니다.
5. 연재할 글은 시리즈로 묶으세요. 1편만 읽고 끝나지 않고, 자연스럽게 다음 편까지 읽히게 됩니다.
6. 프로필 URL을 이력서·자기소개·SNS 프로필 어디든 넣으세요. https://develog.kiweb.or.kr/@내아이디 한 줄이면 포트폴리오 링크 하나 완성입니다.
7. 기능 개선 및 에러 신고: https://forms.gle/eaUjYXQcuau3AKZj8