인프랩 A to C : 콘텐츠 OJT 대시보드

(4.9) 8개의 수강평 ∙ 56명의 수강생

인프런

인프랩

공개되지 않은 강의로
수강이 제한됩니다.

지식공유자: 인프런

총 47개 수업

수강기한:

수료증: 발급

난이도: --

지식공유자 답변: 미제공

콘텐츠 파트에 새로 합류하신 여러분, 반갑습니다. 앞으로 콘텐츠 파트에서 여러분이 수행하실 업무 전반을 알려드릴게요 :)

✍️
이런 걸
배워요!

콘텐츠 에디터 수행 업무

MD 수행 업무

차근차근 함께 걸어가다 보면 목표 지점에 도달할 거예요!
지치고 힘들 때, 신나고 기쁠 때 모두모두 함께 해요🎈

학습하며 궁금한 점이 생기시면 앞뒤양옆 편하게 물어봐주세요!! 😊

기본 에디팅 템플리팅 (변검 ver.)

필수 확인사항

최대한 변검 템플릿을 활용해주세요. (--- /notice-box /notice-box-blue /notice-box-red /text-box /text-box-gray 등)
자잘한 여백(margin/padding), 폰트 사이즈 수정 등은 변검 템플릿의 디자인을 해치지 않는 선에서 에디터가 자율적으로 진행합니다.

메인 컬러 팔레트

#00c471 - 그린
#343a40 - 블랙
#0075ff - 블루
#e5503c - 레드

Heading1

# Heading1 후 [Bold]

Heading2

## Heading2 후 [Bold]

Heading3

### Heading3 후 [Bold]

Heading4

#### Heading4 후 [Bold]

italic

*italic*

bold

**bold**

code

`code`

code

```code

unorderedlist

- unorderedlist
* unorderedlist

orderedlist

1. orderedlist

---

기본 템플릿 명령어 (변검 ver.)

Paragraph

/header *모바일 기준 2줄 이내로 작성

Paragraph

/gradiant-header *모바일 기준 2줄 이내로 작성

/gap

gap 명령어를 이용하면 40px 이 띄어집니다.
에디팅에서는 분홍색으로 표시되지만 실제로는 투명한 색이니 걱정하지 말고 사용해주세요.

_{이미지에 대한 설명}

/img+caption *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

_caption

title

description

_caption

title

description

/card2 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card2는 2개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

_caption

title

description

_caption

title

description

_caption

title

description

/card3 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card3 은 3개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

_caption

title

description

_caption

title

description

_caption

title

description

_caption

title

description

/card4 *<sub style="display: block;"></sub>으로 캡션 종속시킬 것

card4 는 4개의 강의 카드가 나열됩니다. 에디터와 실제 보이는 화면이 다를 수 있지만 신경쓰지 않으셔도 됩니다.

제목을 입력해주세요.

이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요

/notice-box *강의 주의사항, 참고사항 등

제목을 입력해주세요.

이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요

/notice-box-red *강의 주의사항, 참고사항 등

제목을 입력해주세요.

이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요
이곳에 내용을 입력해주세요

/notice-box-blue *강의 주의사항, 참고사항 등

Q. 타이틀 영역입니다.

본문 영역입니다. 수정해주세여.

/qna-box *자주 묻는 질문

여기에 입력해주세요

/button *랜딩페이지 이동을 위한 버튼

여기에 입력해주세요

/large-button *랜딩페이지 이동을 위한 버튼

/image

중앙정렬이 된 이미지를 넣고 싶을 때 사용하시면 됩니다.

내용을 입력하세요.

/flex-box *2단 이미지/텍스트 배열

내용을 입력하세요.

/flex-box-right *2단 텍스트/이미지 배열

내용을 입력하세요.

/flex-hook *2단 이미지/텍스트 배열

내용을 입력하세요.

/flex-hook-right *2단 텍스트/이미지 배열

여기에 내용을 입력하세요.

/text-box *구분 영역 등에 활용

여기에 내용을 입력하세요.

/text-box-gray *구분 영역 등에 활용

반복업무

끝없는 반복 업무에 지친 직장인과 대학생

파이썬?

파이썬 이름은 들어봤는데 궁금한 분

코알못

프로그래밍
배우고 싶은 모든 분

파알못

파이썬을
처음 접하는 분

/feature-4 *수강 타겟, 다단 스킬 표현 등에 활용 (Bulma 참조)

장기효 (캡틴판교)

현 프런트엔드 개발자
"Do it! Vue.js 입문" 저자
네이버, 이베이코리아, 삼성, LG, SK그룹 등 Vue.js 강의
패스트캠퍼스 Vue.js 정복캠프 강의
Google 웹 기술 공식 사이트 번역자
기술 블로그 , Github

/profile *지식공유자 프로필 등에 활용

여기에 제목을 입력해주세요

여기에 내용을 입력해주시면, 더 뚜렷하게 학습 내용을 강조할 수 있어요!
1~3줄 정도로 간결하게 작성하는 것을 권장합니다.

단축키 없음 *요청 예정 *모바일에서 이미지 깨짐

#1.
여기에 제목을
입력하세요

여기에 내용을 입력하세요

반응형 박스 *현재 단축키 없음, 코드를 긁어서 사용해주세요

<div style="margin-top: 24px; margin-bottom: 24px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box" style="margin: 0;">
<div class="flex-box__img" style="margin: 0;">
<h4 style="margin-top: 0;"><span style="color: #0075ff;"><strong>#1.</span><br />여기에 제목을 <br />입력하세요</strong></h4>
</div>
<div class="flex-box__desc" style="margin: 0;">
<p style="margin-bottom: 0; font-size: 15px;">여기에 내용을 입력하세요</p>
</div>
</div>
</div>

버튼 없는 알약 (1개)

#알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span></p>

버튼 없는 알약 (여러 개)

#알약 #알약 #알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span> <span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span> <span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;">#알약</span></p>

버튼 있는 알약 (1개)

#알약

<p><span style="color: #ffffff; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>

버튼 있는 알약 (여러 개)

#알약#알약#알약

<p style="line-height: 180%;"><span style="color: #ffffff; margin-right: 5px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>
<p style="line-height: 180%; margin: 0px; padding: 0px;"><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span><span style="color: #ffffff; margin-right: 2px; padding: 0.2rem 0.6rem; background-color: #4eb563; font-weight: bold; font-size: 0.8rem; border-radius: 10rem;"><a href="#" target="_self" rel="noopener noreferrer">#알약</a></span></p>

추가 설명 : 알약 클릭시 스크롤다운 방법

만약 스크롤다운을 만들고 싶다면 <a href="여기"> 에 간단한 값을 입력해주고, 스크롤 다운할 위치의 태그에 id 값으로 위 a 태그의 '여기'에 해당하는 값을 입력해주세요.
예) <a href="typeA"> && <div id="typeA">
이해가 어렵다면 @로빈을 소환해주세요!

네모 박스 안에 회색 박스 넣기

내용을 입력하세요.

내용을 입력하세요.
내용을 입력하세요.

<div style="padding: 1.8rem; border: 1px solid #ededed; margin-bottom: 2rem;">
<h4><strong>내용을 입력하세요.</strong></h4>
<p>내용을 입력하세요.</p>
<div style="padding: 1.6rem; border: 1px solid #E9ECEF; background-color: #f8f9fa; margin-top: 2rem;">
<p style="font-size: 0.9rem;"><strong>내용을 입력하세요.</strong><br />내용을 입력하세요.</p>
</div>
</div>

모바일 반응형 박스 : 사진 2개 (flex-box)

<div style="margin-top: 16px; margin-bottom: 0; padding: 18px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box" style="margin-bottom: 0;">
<div class="flex-box__img"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div class="flex-box__desc" style="margin-bottom: 0;">
<p style="margin-bottom: 0;"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" style="color: #000000; font-size: medium;" /></p>
</div>
</div>
</div>

모바일 반응형 박스 : 사진 + 글 (flex-box)

내용을 입력해주세요.

내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.

<div style="margin-top: 16px; margin-bottom: 0px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="flex-box">
<div class="flex-box__img"><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div class="flex-box__desc">
<h4><strong>내용을 입력해주세요.</strong></h4>
<p>내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.<br />내용을 입력해주세요.</p>
</div>
</div>
</div>

강의 상세 소개

Part 1. 내용을 입력해주세요.

내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.

Part 2. 내용을 입력해주세요.

내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.
내용을 입력해주세요.

<div style="margin-top: 20px; text-align: left;">
<div class="card-wrapper card-wrapper-2" style="display: flex; flex-wrap: wrap;">
<div class="card-el" style="flex: 1 0 auto; margin-bottom: 16px; padding: 0 6px;">
<div style="padding: 22px; border-radius: 8px; border: 1px solid #DEE2E6; height: 200px;">
<p style="font-size: 0.9rem; margin-top: 0;"><span style="font-size: 14.4px;"><b>Part 1. 내용을 입력해주세요.</b></span></p>
<ul style="margin-bottom: 0;">
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.<br /><br /></li>
</ul>
</div>
</div>
<div class="card-el" style="flex: 1 0 auto; margin-bottom: 16px; padding: 0 6px;">
<div style="padding: 22px; border-radius: 8px; border: 1px solid #DEE2E6; height: 200px;">
<p style="font-size: 0.9rem; margin-top: 0;"><span style="font-size: 14.4px;"><b>Part 2.&nbsp;</b></span><b>내용을 입력해주세요.</b></p>
<ul style="margin-bottom: 0;">
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
<li style="font-size: 0.85rem;">내용을 입력해주세요.</li>
</ul>
</div>
</div>
</div>

짧은 문단 나누기

<hr style="width: 70px; margin: 1rem auto; border-top: 1px solid #ccc;" />

토글 기능

내용을 입력해주세요.

^{Q. 내용을 입력해주세요.
A. 내용을 입력해주세요.}

Q. 내용을 입력해주세요.
A. 내용을 입력해주세요.

<details style="color: #343a40; margin-top: 2rem;" open="open">
<summary style="color: #343a40; font-size: 15px;"><span style="background-color: #fbeeb8;"><strong>내용을 입력해주세요.</strong></span></summary>
<div class="ql-block" data-block-id="block-f2cf9290-7160-4251-93b6-f3ae31ea808b">
<p class="p2" style="color: #000000; margin: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; font-family: 'Apple SD Gothic Neo'; letter-spacing: normal;"><sup><span style="color: #495057; text-align: center;"><strong>Q. 내용을 입력해주세요.</strong><br />A. 내용을 입력해주세요.</span></sup></p>
<p class="p2" style="color: #000000; margin: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 13px; line-height: normal; letter-spacing: normal;"><strong style="color: #495057; text-align: center;">Q. 내용을 입력해주세요.</strong><br style="color: #495057; text-align: center;" /><span style="color: #495057; text-align: center;">A. 내용을 입력해주세요.</span></p>
</div>

모바일 2개씩 보이게 설정

내용을 입력해주세요.

<div style="margin-top: 16px; margin-bottom: 16px; padding: 24px; border-radius: 8px; border: 1px solid #DEE2E6;">
<div class="card-wrapper card-wrapper-3" style="display: flex; flex-wrap: wrap;">
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
<div class="column is-one-third is-6-mobile">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<p style="display: block; text-align: center; font-size: 0.9rem;">내용을 입력해주세요.</p>
</div>
</div>
</div>

이미지 2개 가운데 정렬

<div style="display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; margin: 0;">
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
<div><img src="https://cdn.inflearn.com/assets/brand/default_course_image.png" alt="" /></div>
</div>

변검 이전 버전 템플릿 명령어

변검으로 추가된 템플릿과 달리 디자인이 일관적이지 않습니다.
부득이한 경우 외에는 최대한 사용을 지양해주세요!
(변검 ver. 를 메인으로 사용해주세요.)

Marked

/mark

HEADER

/header

HEADER

/header-grad

small

/pill-small

pill header

/pill-title

📣 공지사항• 내용을 입력해주세요

/notice

Q. 질문을 작성하세요
A. 답변을 작성하세요.

/qna

Title

Title
Description

/another

추가되어야하거나 추가시키고 싶은 템플릿이 있다면 @PAPICO 에게 DM을 보내시면 커뮤니케이션을 통해 추가하도록 하겠습니다!

🎓
학습 대상은
누구일까요?

콘텐츠파트 신규 입사자

콘텐츠파트 업무가 궁금한 분들

인프런 강의 운영 과정을 알고 싶은 분들

배움의 기회는 경제적, 물리적 한계에서 자유로워야 한다고 생각합니다.
우리는 성장기회의 평등을 추구합니다.

이 강의는 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.

섹션 0. OT 8 강

콘텐츠파트&셀 소개

슬랙 & 디스코드 커뮤니케이션

파트 간 커뮤니케이션

클릭업 & 구글 드라이브 활용 방법

함께 공유하는 시간

지식공유자 관리 큰그림

셀 조직 이해하기 (삭제 예정)

팀 목표와 지향점 (삭제 예정)

섹션 1. 강의 기획부터 오픈까지 10 강

나만의 콘텐츠 기획하기

영상 강의 제작하기

텍스트 강의 제작하기

유튜브 영상, 무료 강의 오픈하기

강의 제출하기

강의 오픈 준비 [강의 검토]

강의 오픈 준비 [강의 오픈]

컨퍼런스/모임 & 부트캠프/교육 강의 오픈

강의 업로드하고 설정하기

실습: 내 강의 만들고 오픈하기 (ITGO - 유용한IT학습)

섹션 2. 콘텐츠 에디터 업무 꿀팁 10 강

인프런 페이지 & 강의 소개페이지 편집 팁

실습: 실제 소개페이지 편집하기

강의 썸네일 제작, 수정하는 법

로드맵 관리 및 편집하기

강의, 로드맵 리뉴얼 프로세스

카테고리, 스킬태그, 히어로 배너 관리하기

검색어(키워드) 관리하기

영상 인코딩하기

자주 발생하는 문제 및 에디팅 세부 규칙, 팁 모음

실습: 인프런 이야기 작성하기 - MD's Pick!

섹션 3. 강의 운영하기 5 강

쿠폰 활용하기

수강생 관리와 새소식

로드맵 활용하기

정산 안내

쿠폰 활용하기 (레거시 백업용 - 스킵해주세요)

섹션 4. MD 업무 꿀팁 11 강

신규 지식공유자 관리 방법

지식공유자 섭외부터 강의 제작 제안까지

기획/제작중 지식공유자 관리하기

강의 오픈 후 지식공유자&강의 관리

자주 묻는 질문들

단체 메일 보내기 - 메일침프 사용법

어둠의 자동화 셀에서 알려드립니다. (재피어 및 각종 자동화 활용법)

채널톡 이렇게 활용해보세요!

모두싸인 활용하기

인프런 어드민 둘러보기

MD들의 꿀팁 대 방 출

섹션 5. 강의 홍보 방법 3 강

히어로 배너 관리

강의 홍보하기 - 온드채널 (SNS) 활용

마케팅 파트와 협업하기

강의 게시일 : 2020년 10월 22일 (마지막 업데이트일 : 2023년 07월 25일)

수강생분들이 직접 작성하신 수강평입니다.

4.9

8개의 수강평

5점

4점

3점

2점

1점

VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순

최고최고 아주 최고최고

2022-02-25

실무에 너무 도움 되는 강의입니다!! (추천추천)

2020-11-03

별점 테스트 중~!! 추천추천

2021-05-31

인프런 화이팅 좋아요 눌러주세용 잎 쌓기 테스트중....

2024-03-22

ㅠㅠ 짱짱맨이에요!!!

2020-10-21

인프랩 A to C : 콘텐츠 OJT 대시보드

기본 에디팅 템플리팅 (변검 ver.)

필수 확인사항

메인 컬러 팔레트

Heading1

Heading2

Heading3

Heading4

기본 템플릿 명령어 (변검 ver.)

장기효 (캡틴판교)

여기에 제목을 입력해주세요

#1.여기에 제목을 입력하세요

버튼 없는 알약 (1개)

버튼 없는 알약 (여러 개)

버튼 있는 알약 (1개)

버튼 있는 알약 (여러 개)

추가 설명 : 알약 클릭시 스크롤다운 방법

네모 박스 안에 회색 박스 넣기

내용을 입력하세요.

모바일 반응형 박스 : 사진 2개 (flex-box)

모바일 반응형 박스 : 사진 + 글 (flex-box)

내용을 입력해주세요.

강의 상세 소개

짧은 문단 나누기

토글 기능

모바일 2개씩 보이게 설정

이미지 2개 가운데 정렬

변검 이전 버전 템플릿 명령어

Title

이런 분들께 추천드려요!

#1.
여기에 제목을
입력하세요