DKT Creative
Kakao Tech
Campus
UX/UI / Web / Product Design
Kakao Tech Campus
At Kakao Tech Campus,
we learn and grow together.
카카오테크 캠퍼스의 철학과 디자인 아이덴티티를
일관되게 유지하며 반응형 설계로 디자인 레이아웃을
효율적으로 구축하였습니다.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
더 알아보기
카카오 테크 캠퍼스에서는
함께 배우며 성장합니다
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에
적합한 인재를 양성하고
사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한
차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께
시너지를 만들어 나갑니다.
현직 경험을 보유한
강사진, 멘토와 함께
실제 현업에서 업무를
수행하는 방식을 학습하며
운영매니저의 밀착 관리를 통해
학습에 몰입할 수 있는
환경을 제공하고
학습 중 발생하는 어려움을
함께 극복할 수 있도록
지원합니다.
수강생
카카오 테크 캠퍼스
교육
#현직 경험을 보유한 강사진
#프로젝트 실습형 교육
#언제 어디서나 학습이 가능한
#카카오 크루 특강
경험
#멘토링/코드리뷰
#카카오가 일하는 방식
#기획부터 배포까지
#나만의 포트폴리오
지원
#1:1 밀착 관리
#장학금/디지털 수료증
#개발 협업툴
#굿즈/전용 커뮤니티
자세히 보기
카카오는 대학생들이 시간과 공간의
제약 없이 실무에 가까운 교육을 경험할 수
있는 기회를 제공하고자 하였습니다.
자기주도적
온라인 학습
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과 동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
자세히 보기
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자기주도적 학습과
직무 기반의 팀 프로젝트, 협업과
문제 해결의 과정을 통해
기술 역량을 키우고
카카오와 함께 더 나은 세상을
만들 개발자로 성장합니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
설명회 안내
부산대 3/22(화), 전남대 3/24(목)
안녕하세요 여러분,
카카오 테크 캠퍼스 운영진입니다.
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
🎉
감사합니다.
첨부파일 :
설명회 사전 안내사항.pdf
목록
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
서류 접수
지원서 및 자기소개서 제출
3월 2일 ~ 17일
코딩 테스트
온라인 테스트 진행
3월 16일 ~ 17일
최종 합격
합격 여부 개별 안내
3월 24일
지원하기
뉴스
FAQ
지원 자격
커리큘럼
카테고리명
수료혜택
안내
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
더 많은 소식이 궁금하다면?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
A.
관련 전공을 하고 있지 않더라도... ~ 기술에 대한 원리를 이해 및 파악하고, 제공된 베이스코드를 기반으로 상용화 웹페이지를 구현하며, 실 사용자가 사용하는 서 비스를 기획-구현- 배포함으로써 실무 경험을 통한 문제 해결력을 기를 수 있습니다.
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
이외에도 궁금한 점이 있다면 ?
1:1 문의 바로가기
1
2
3
4
5
© Kakao Tech Campus. All rights reserved.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
브랜드 아이덴티티를 반영한 컬러 반영과 브랜드 핵심 가치 및 키워드를 통해 탐험과 모험을 마친 상징과 공통의 목표를 지닌 하나의 팀을 동시에 상징하는 ‘깃발' 프레임을 활용, 젊은 연령층의 새로운 시도와 도전을 함께 도모하고자 합니다.
#동반 성장
#관계 형성
#공통 목표
About
Through self-directed learning and job-based team projects, and by practicing collaboration and problem-solving, you will build strong technical skills and grow into a developer who creates a better world together with Kakao.
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자세히 보기
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과
동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
카카오는 대학생들이 시간과 공간의 제약 없이
실무에 가까운 교육을 경험할 수 있는 기회를
제공하고자 하였습니다.
그래서 카카오 테크 캠퍼스의 교육과정은 언제
어디서든 학습이 가능한 온라인 방식으로
진행됩니다.
자기주도적
온라인 학습
자기주도적 학습과 직무 기반의 팀 프로젝트,
협업과 문제 해결의 과정을 통해 기술 역량을 키우고
카카오와 함께 더 나은 세상을 만들 개발자로 성장합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Program
By learning the technical stack and building the Kakao Shopping web page using the provided base code, participants gain hands-on experience in planning, developing, and deploying real user–facing services, while strengthening their problem-solving skills.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트,
3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을 토대로 새로운
서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션 클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
About
Program
Apply
Information
Apply
By learning the technical stack and building the Kakao Shopping web page using the provided base code, participants gain hands-on experience in planning, developing, and deploying real user–facing services, while strengthening their problem-solving skills.
Design Guide
Our design guide has extensive experience in responsive design, optimizing for devices
like desktops and mobile phones.
Typography / PC
Subtitle 1~4
H1~6
Subtitle 5~6
Body 1 ~ Caption
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.4 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.3= 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.45 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 1. 글자 크기 x 1.4, 2. 글자 크기 x 1.45 , 3. 글자 크기 x 1.5 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림, 반내림한 수치를 적용하여 되도록 짝수값을 유지한다.
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
English & Calender Number
Roboto 48 Bold
Roboto 40 Bold
Roboto 36 Bold
Roboto 32 Bold
Roboto 30 Medium
Roboto 28 Medium
Roboto 22 Medium
Roboto 18 Medium
Roboto 14 Medium
Roboto 15 Medium
Roboto 14 Medium
Roboto 13 Regular
Roboto 12 Regular
Window
NotoSans CJK 48 Bold
NotoSans CJK 40 Bold
NotoSans CJK 34 Bold
NotoSans CJK 30 Bold
NotoSans CJK 28 Medium
NotoSans CJK 26 Medium
NotoSans CJK 20 Medium
NotoSans CJK 18 Medium
NotoSans CJK 14 Medium
NotoSans CJK 16 Medium
NotoSans CJK 14 Medium
NotoSans CJK 13 Regular
NotoSans CJK 12 Regular
Mac
Apple SD Gothic 48 Bold
Apple SD Gothic 40 Bold
Apple SD Gothic 36 Bold
Apple SD Gothic 32 Bold
Apple SD Gothic 30 Medium
Apple SD Gothic 28 Medium
Apple SD Gothic 24 Medium
Apple SD Gothic 18 SemiBold
/ Apple SD Gothic 18 SemiBold
Apple SD Gothic 14 SemiBold
Apple SD Gothic 16 Bold
Apple SD Gothic 16 SemiBold
Apple SD Gothic 16 Regular
Apple SD Gothic 14 Regular
Apple SD Gothic 13 Regular
Apple SD Gothic 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
H7
Subtitle1
Subtitle2
Body1
Body2
Body3
Body4
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
Common
KakaoBig 100 ExtraBold
KakaoBig 60 ExtraBold
/ KakaoBig 60 Bold
KakaoBig 48 ExtraBold
KakaoBig 40 ExtraBold
KakaoBig 36 ExtraBold
/ KakaoBig 36 Bold
KakaoBig 32 ExtraBold
/ KakaoBig 32 Bold
KakaoBig 30 Bold
KakaoBig 28 Bold
KakaoBig 24 ExtraBold
/ KakaoBig 24 Bold
/ KakaoBig 24 Regular
KakaoBig 20 Bold
KakaoBig 18 ExtraBold
/ KakaoBig 18 Bold
/ KakaoBig 18 Regular
KakaoBig 14 Extrabold
KakaoBig 16 Bold /
KakaoBig 16 Bold
KakaoBig 14 Bold
/ KakaoBig 14 Regular
KakaoBig 13 Regular
KakaoBig 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
Subtitle1
Subtitle2
Subtitle3
Subtitle4
Subtitle5
Subtitle6
Body1
Body2
Body3
Caption
국문 (관리자)
Apple SD Gothic Neo Bold
Apple SD Gothic Neo Medium
Apple SD Gothic Neo Regular
NotoSans CJK KR Bold
NotoSans CJK KR Medium
NotoSans CJK KR Regular
글자크기 x 1.5 = 행간
글자크기 x 1.5 = 행간
글자크기 x 1.45 = 행간
글자크기 x 1.4 = 행간
글자크기 x 1.4 = 행간
Roboto Bold
Roboto Medium
Roboto Regular
글자크기 x 1.5 = 행간
영문 / Calendar Number
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 (글자 크기 x 1.4 : H1, H2, Subtitle1~4) , (글자 크기 x 1.45 : Subtitle4~5, H3~H6 - Caption (글자 크기 x 1.5) 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림한 수치를 적용합니다.
Color
Status Color
Background Color - Dim
모든 레이어 창 오픈 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 60%
RGB
0, 0, 0
Hex
#000000
Background Color - Dim_Loading
로딩 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 10%
RGB
0, 0, 0
Hex
#000000
Background Color - Toast, Tooltip
toast 팝업 노출 시, 아래와 같은 컬러를 권장하여 사용합니다.
Dim - Opacity 80%
RGB
0, 0, 0
Hex
#000000
Effect Styles - Shadow
공통 그림자 효과로 사용합니다.
shadow - Opacity 16%
XYBS
0, 2, 8, 0
Hex
#000000
Effect Styles - Line
Line요소는 콘텐츠와 콘텐츠 사이를 나누는 Divider로써 활용하며 Dash:2, Gap:4를 유지합니다.
Line - Dash:2, Gap:4
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Line - Dash:2, Gap:4
RGBA
204, 204, 204, 1
Hex
#cccccc
Line - Dash:2, Gap:4
RGBA
153, 153, 153, 1
Hex
#999999
status_blue
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
status_blue_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
status_blue_lighter
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Status_Color_blue
진행 중의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
status_red
RGBA
255, 51, 51, 1
Hex
#ff3333
Red - 80
status_red_light
RGBA
255, 102, 102, 1
Hex
#ff6666
Red - 60
status_red_lighter
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red - 20
Status_Color_Red
부정, 에러 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Status_Color_Yellow
경고, 정보성 알림 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Yellow - 80
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 3
RGBA
255, 254, 247, 1
Hex
#FFFEF7
status_yellow
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
status_yellow_light
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 80
status_yellow_lighter
RGBA
255, 248, 204, 1
Hex
#fff8cc
Yellow - 20
status_green
RGBA
48, 203, 131, 1
Hex
#30CB83
Green - 40
status_green_light
RGBA
130, 237, 184, 1
Hex
#82EDB8
Green - 30
status_green_lighter
RGBA
189, 240, 215, 1
Hex
#BDF0D7
Green - 12
Status_Color_Green
긍정, 진행 완료 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Secondary_Color
메일링, 캘린더 등 Secondary 포인트 UI 요소로 활용합니다.
secondary_dark
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
secondary_primary
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
B
secondary_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
secondary_lighter
RGBA
178, 204, 255, 1
Hex
#b2ccff
Blue - 30
secondary_lightest
RGBA
230, 226, 255, 1
Hex
#E6E2FF
Blue - 10
secondary_white
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Sub_Color
보조 색상입니다. 메인 화면 요소를 보조해주는 색상으로 활용합니다.
sub_red
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
B
sub_red_light
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
sub_red_lighter
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
sub_green
RGBA
178, 204, 255, 1
Hex
#2ded8e
Blue - 30
B
sub_green_light
RGBA
124, 223, 174, 1
Hex
#7CDFAE
Blue - 10
sub_green_lighter
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Primary_Color
메일링, 캘린더 등 Primary 포인트 UI 요소로 활용합니다.
primary_dark
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
primary
RGBA
255, 228, 51, 1
Hex
#ffe742
Yellow - 80
B
primary_light
RGBA
255, 235, 102, 1
Hex
#ffeb66
Yellow - 60
primary_lighter
RGBA
255, 245, 178, 1
Hex
#fff5b2
Yellow - 30
primary_lightest
RGBA
255, 252, 229, 1
Hex
#fffce5
Yellow - 10
primary_white
RGBA
255, 254, 247, 1
Hex
#FFFEF7
Yellow - 2
Grayscale
공통으로 사용되는 Gray 색상 입니다.
gray_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
gray_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
gray_darker
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
gray_dark
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_lighter
RGBA
247, 247, 247, 1
Hex
#f7f7f7
Gray - 97
gray_lightest
RGBA
250, 250, 250, 1
Hex
#fafafa
Gray - 98
gray_white
RGBA
255, 255, 255, 1
Hex
#ffffff
Gray - 100
Font_Color
버튼을 제외한 모든 폰트 색상에 활용됩니다.
font_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
font_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
font_darker
RGBA
102, 102, 102, 1
Hex
#666666
Gray - 40
font_dark
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
font_light
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
font_lighter
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
font_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
font_negative_light
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red -20
font_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
font_positive_light
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Line_Color
공통으로 사용되는 Line 색상입니다.
line_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
line_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
line_darker
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
line_dark
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
line_light
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Gray - 90
line_lighter
RGBA
240, 240, 240, 1
Hex
#f0f0f0
Gray - 94
line_lightest
RGBA
245, 245, 245, 1
Hex
#f5f5f5
Gray - 96
line_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
line_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
line_positive_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
Multi-Device Design
Our design guide has extensive experience in responsive design, optimizing for devices
like desktops and mobile phones.
Other Contents
본 작업은 카카오의 브랜드 자산을 기반으로,
디케이테크인 UX/UI 프로젝트로
확장해 완성되었습니다.
DKT Creative
Kakao Tech
Campus
UX/UI / Web / Product Design
Kakao Tech Campus
At Kakao Tech Campus,
we learn and grow together.
카카오테크 캠퍼스의 철학과 디자인 아이덴티티를 일관되게 유지하며
반응형 설계로 디자인 레이아웃을 효율적으로 구축하였습니다.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
더 알아보기
카카오 테크 캠퍼스에서는
함께 배우며 성장합니다
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에
적합한 인재를 양성하고
사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한
차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께
시너지를 만들어 나갑니다.
현직 경험을 보유한
강사진, 멘토와 함께
실제 현업에서 업무를
수행하는 방식을 학습하며
운영매니저의 밀착 관리를 통해
학습에 몰입할 수 있는
환경을 제공하고
학습 중 발생하는 어려움을
함께 극복할 수 있도록
지원합니다.
수강생
카카오 테크 캠퍼스
교육
#현직 경험을 보유한 강사진
#프로젝트 실습형 교육
#언제 어디서나 학습이 가능한
#카카오 크루 특강
경험
#멘토링/코드리뷰
#카카오가 일하는 방식
#기획부터 배포까지
#나만의 포트폴리오
지원
#1:1 밀착 관리
#장학금/디지털 수료증
#개발 협업툴
#굿즈/전용 커뮤니티
자세히 보기
카카오는 대학생들이 시간과 공간의
제약 없이 실무에 가까운 교육을 경험할 수
있는 기회를 제공하고자 하였습니다.
자기주도적
온라인 학습
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과 동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
자세히 보기
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자기주도적 학습과
직무 기반의 팀 프로젝트, 협업과
문제 해결의 과정을 통해
기술 역량을 키우고
카카오와 함께 더 나은 세상을
만들 개발자로 성장합니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
설명회 안내
부산대 3/22(화), 전남대 3/24(목)
안녕하세요 여러분,
카카오 테크 캠퍼스 운영진입니다.
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
🎉
감사합니다.
첨부파일 :
설명회 사전 안내사항.pdf
목록
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
서류 접수
지원서 및 자기소개서 제출
3월 2일 ~ 17일
코딩 테스트
온라인 테스트 진행
3월 16일 ~ 17일
최종 합격
합격 여부 개별 안내
3월 24일
지원하기
뉴스
FAQ
지원 자격
커리큘럼
카테고리명
수료혜택
안내
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
더 많은 소식이 궁금하다면?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
A.
관련 전공을 하고 있지 않더라도... ~ 기술에 대한 원리를 이해 및 파악하고, 제공된 베이스코드를 기반으로 상용화 웹페이지를 구현하며, 실 사용자가 사용하는 서 비스를 기획-구현- 배포함으로써 실무 경험을 통한 문제 해결력을 기를 수 있습니다.
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
이외에도 궁금한 점이 있다면 ?
1:1 문의 바로가기
1
2
3
4
5
© Kakao Tech Campus. All rights reserved.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
브랜드 아이덴티티를 반영한 컬러 반영과 브랜드 핵심 가치 및 키워드를 통해 탐험과 모험을 마친 상징과 공통의 목표를 지닌 하나의 팀을 동시에 상징하는 ‘깃발' 프레임을 활용, 젊은 연령층의 새로운 시도와 도전을 함께 도모하고자 합니다.
#동반 성장
#관계 형성
#공통 목표
About
Through self-directed learning and job-based team projects,
and by practicing collaboration and problem-solving,
you will build strong technical skills
and grow into a developer who creates a better world together with Kakao.
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자세히 보기
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과
동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
카카오는 대학생들이 시간과 공간의 제약 없이
실무에 가까운 교육을 경험할 수 있는 기회를
제공하고자 하였습니다.
그래서 카카오 테크 캠퍼스의 교육과정은 언제
어디서든 학습이 가능한 온라인 방식으로
진행됩니다.
자기주도적
온라인 학습
자기주도적 학습과 직무 기반의 팀 프로젝트,
협업과 문제 해결의 과정을 통해 기술 역량을 키우고
카카오와 함께 더 나은 세상을 만들 개발자로 성장합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Program
By learning the technical stack and building the Kakao Shopping web page using the provided base code,
participants gain hands-on experience in planning, developing, and deploying real user–facing services,
while strengthening their problem-solving skills.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트,
3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을 토대로 새로운
서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션 클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
About
Program
Apply
Information
Apply
By learning the technical stack and building the Kakao Shopping web page using the provided base code,
participants gain hands-on experience in planning, developing, and deploying real user–facing services,
while strengthening their problem-solving skills.
Design Guide
Our design guide has extensive experience in responsive design,
optimizing for devices like desktops and mobile phones.
Typography / PC
Subtitle 1~4
H1~6
Subtitle 5~6
Body 1 ~ Caption
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.4 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.3= 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.45 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 1. 글자 크기 x 1.4, 2. 글자 크기 x 1.45 , 3. 글자 크기 x 1.5 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림, 반내림한 수치를 적용하여 되도록 짝수값을 유지한다.
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
English & Calender Number
Roboto 48 Bold
Roboto 40 Bold
Roboto 36 Bold
Roboto 32 Bold
Roboto 30 Medium
Roboto 28 Medium
Roboto 22 Medium
Roboto 18 Medium
Roboto 14 Medium
Roboto 15 Medium
Roboto 14 Medium
Roboto 13 Regular
Roboto 12 Regular
Window
NotoSans CJK 48 Bold
NotoSans CJK 40 Bold
NotoSans CJK 34 Bold
NotoSans CJK 30 Bold
NotoSans CJK 28 Medium
NotoSans CJK 26 Medium
NotoSans CJK 20 Medium
NotoSans CJK 18 Medium
NotoSans CJK 14 Medium
NotoSans CJK 16 Medium
NotoSans CJK 14 Medium
NotoSans CJK 13 Regular
NotoSans CJK 12 Regular
Mac
Apple SD Gothic 48 Bold
Apple SD Gothic 40 Bold
Apple SD Gothic 36 Bold
Apple SD Gothic 32 Bold
Apple SD Gothic 30 Medium
Apple SD Gothic 28 Medium
Apple SD Gothic 24 Medium
Apple SD Gothic 18 SemiBold
/ Apple SD Gothic 18 SemiBold
Apple SD Gothic 14 SemiBold
Apple SD Gothic 16 Bold
Apple SD Gothic 16 SemiBold
Apple SD Gothic 16 Regular
Apple SD Gothic 14 Regular
Apple SD Gothic 13 Regular
Apple SD Gothic 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
H7
Subtitle1
Subtitle2
Body1
Body2
Body3
Body4
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
Common
KakaoBig 100 ExtraBold
KakaoBig 60 ExtraBold
/ KakaoBig 60 Bold
KakaoBig 48 ExtraBold
KakaoBig 40 ExtraBold
KakaoBig 36 ExtraBold
/ KakaoBig 36 Bold
KakaoBig 32 ExtraBold
/ KakaoBig 32 Bold
KakaoBig 30 Bold
KakaoBig 28 Bold
KakaoBig 24 ExtraBold
/ KakaoBig 24 Bold
/ KakaoBig 24 Regular
KakaoBig 20 Bold
KakaoBig 18 ExtraBold
/ KakaoBig 18 Bold
/ KakaoBig 18 Regular
KakaoBig 14 Extrabold
KakaoBig 16 Bold /
KakaoBig 16 Bold
KakaoBig 14 Bold
/ KakaoBig 14 Regular
KakaoBig 13 Regular
KakaoBig 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
Subtitle1
Subtitle2
Subtitle3
Subtitle4
Subtitle5
Subtitle6
Body1
Body2
Body3
Caption
국문 (관리자)
Apple SD Gothic Neo Bold
Apple SD Gothic Neo Medium
Apple SD Gothic Neo Regular
NotoSans CJK KR Bold
NotoSans CJK KR Medium
NotoSans CJK KR Regular
글자크기 x 1.5 = 행간
글자크기 x 1.5 = 행간
글자크기 x 1.45 = 행간
글자크기 x 1.4 = 행간
글자크기 x 1.4 = 행간
Roboto Bold
Roboto Medium
Roboto Regular
글자크기 x 1.5 = 행간
영문 / Calendar Number
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 (글자 크기 x 1.4 : H1, H2, Subtitle1~4) , (글자 크기 x 1.45 : Subtitle4~5, H3~H6 - Caption (글자 크기 x 1.5) 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림한 수치를 적용합니다.
Color
Status Color
Background Color - Dim
모든 레이어 창 오픈 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 60%
RGB
0, 0, 0
Hex
#000000
Background Color - Dim_Loading
로딩 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 10%
RGB
0, 0, 0
Hex
#000000
Background Color - Toast, Tooltip
toast 팝업 노출 시, 아래와 같은 컬러를 권장하여 사용합니다.
Dim - Opacity 80%
RGB
0, 0, 0
Hex
#000000
Effect Styles - Shadow
공통 그림자 효과로 사용합니다.
shadow - Opacity 16%
XYBS
0, 2, 8, 0
Hex
#000000
Effect Styles - Line
Line요소는 콘텐츠와 콘텐츠 사이를 나누는 Divider로써 활용하며 Dash:2, Gap:4를 유지합니다.
Line - Dash:2, Gap:4
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Line - Dash:2, Gap:4
RGBA
204, 204, 204, 1
Hex
#cccccc
Line - Dash:2, Gap:4
RGBA
153, 153, 153, 1
Hex
#999999
status_blue
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
status_blue_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
status_blue_lighter
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Status_Color_blue
진행 중의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
status_red
RGBA
255, 51, 51, 1
Hex
#ff3333
Red - 80
status_red_light
RGBA
255, 102, 102, 1
Hex
#ff6666
Red - 60
status_red_lighter
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red - 20
Status_Color_Red
부정, 에러 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Status_Color_Yellow
경고, 정보성 알림 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Yellow - 80
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 3
RGBA
255, 254, 247, 1
Hex
#FFFEF7
status_yellow
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
status_yellow_light
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 80
status_yellow_lighter
RGBA
255, 248, 204, 1
Hex
#fff8cc
Yellow - 20
status_green
RGBA
48, 203, 131, 1
Hex
#30CB83
Green - 40
status_green_light
RGBA
130, 237, 184, 1
Hex
#82EDB8
Green - 30
status_green_lighter
RGBA
189, 240, 215, 1
Hex
#BDF0D7
Green - 12
Status_Color_Green
긍정, 진행 완료 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Secondary_Color
메일링, 캘린더 등 Secondary 포인트 UI 요소로 활용합니다.
secondary_dark
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
secondary_primary
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
B
secondary_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
secondary_lighter
RGBA
178, 204, 255, 1
Hex
#b2ccff
Blue - 30
secondary_lightest
RGBA
230, 226, 255, 1
Hex
#E6E2FF
Blue - 10
secondary_white
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Sub_Color
보조 색상입니다. 메인 화면 요소를 보조해주는 색상으로 활용합니다.
sub_red
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
B
sub_red_light
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
sub_red_lighter
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
sub_green
RGBA
178, 204, 255, 1
Hex
#2ded8e
Blue - 30
B
sub_green_light
RGBA
124, 223, 174, 1
Hex
#7CDFAE
Blue - 10
sub_green_lighter
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Primary_Color
메일링, 캘린더 등 Primary 포인트 UI 요소로 활용합니다.
primary_dark
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
primary
RGBA
255, 228, 51, 1
Hex
#ffe742
Yellow - 80
B
primary_light
RGBA
255, 235, 102, 1
Hex
#ffeb66
Yellow - 60
primary_lighter
RGBA
255, 245, 178, 1
Hex
#fff5b2
Yellow - 30
primary_lightest
RGBA
255, 252, 229, 1
Hex
#fffce5
Yellow - 10
primary_white
RGBA
255, 254, 247, 1
Hex
#FFFEF7
Yellow - 2
Grayscale
공통으로 사용되는 Gray 색상 입니다.
gray_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
gray_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
gray_darker
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
gray_dark
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_lighter
RGBA
247, 247, 247, 1
Hex
#f7f7f7
Gray - 97
gray_lightest
RGBA
250, 250, 250, 1
Hex
#fafafa
Gray - 98
gray_white
RGBA
255, 255, 255, 1
Hex
#ffffff
Gray - 100
Font_Color
버튼을 제외한 모든 폰트 색상에 활용됩니다.
font_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
font_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
font_darker
RGBA
102, 102, 102, 1
Hex
#666666
Gray - 40
font_dark
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
font_light
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
font_lighter
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
font_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
font_negative_light
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red -20
font_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
font_positive_light
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Line_Color
공통으로 사용되는 Line 색상입니다.
line_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
line_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
line_darker
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
line_dark
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
line_light
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Gray - 90
line_lighter
RGBA
240, 240, 240, 1
Hex
#f0f0f0
Gray - 94
line_lightest
RGBA
245, 245, 245, 1
Hex
#f5f5f5
Gray - 96
line_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
line_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
line_positive_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
Multi-Device Design
Our design guide has extensive experience in responsive design, optimizing for devices like desktops and mobile phones.
Other Contents
본 작업은 카카오의 브랜드 자산을 기반으로,
디케이테크인 UX/UI 프로젝트로 확장해 완성되었습니다.
DKT Creative
Kakao Tech Campus
UX/UI / Web / Product Design
Kakao Tech Campus
At Kakao Tech Campus,
we learn and grow together.
카카오테크 캠퍼스의 철학과 디자인 아이덴티티를 일관되게 유지하며
반응형 설계로 디자인 레이아웃을 효율적으로 구축하였습니다.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
더 알아보기
카카오 테크 캠퍼스에서는
함께 배우며 성장합니다
About
Program
Apply
Information
© Kakao Tech Campus. All rights reserved.
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에
적합한 인재를 양성하고
사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한
차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께
시너지를 만들어 나갑니다.
현직 경험을 보유한
강사진, 멘토와 함께
실제 현업에서 업무를
수행하는 방식을 학습하며
운영매니저의 밀착 관리를 통해
학습에 몰입할 수 있는
환경을 제공하고
학습 중 발생하는 어려움을
함께 극복할 수 있도록
지원합니다.
수강생
카카오 테크 캠퍼스
교육
#현직 경험을 보유한 강사진
#프로젝트 실습형 교육
#언제 어디서나 학습이 가능한
#카카오 크루 특강
경험
#멘토링/코드리뷰
#카카오가 일하는 방식
#기획부터 배포까지
#나만의 포트폴리오
지원
#1:1 밀착 관리
#장학금/디지털 수료증
#개발 협업툴
#굿즈/전용 커뮤니티
자세히 보기
카카오는 대학생들이 시간과 공간의
제약 없이 실무에 가까운 교육을 경험할 수
있는 기회를 제공하고자 하였습니다.
자기주도적
온라인 학습
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과 동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
자세히 보기
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자기주도적 학습과
직무 기반의 팀 프로젝트, 협업과
문제 해결의 과정을 통해
기술 역량을 키우고
카카오와 함께 더 나은 세상을
만들 개발자로 성장합니다.
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
설명회 안내
부산대 3/22(화), 전남대 3/24(목)
안녕하세요 여러분,
카카오 테크 캠퍼스 운영진입니다.
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다 공지글입니다 공지글입니다 공지글입니다 공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다공지글입니다공지글입니다
공지글입니다공지글입니다공지글입니다
🎉
감사합니다.
첨부파일 :
설명회 사전 안내사항.pdf
목록
모집 대상
1
카카오 테크 캠퍼스 프로그램이
개설된 대학 소속 대학생
23년 대상 대학은 부산대 / 전남대로, 대상
대학은 지속 확대될 예정입니다.
2
전공자 또는 관련 기초지식 및
코딩 능력을 보유하신 분
본 교육은 웹 개발에 필요한 프로그래밍
언어 등 기술 지식이 필요하기 때문에,
전공자 수준의 학습을 하신 분이
신청하시기를 권장합니다.
인원 선발은 코딩 테스트를 통해 이뤄집니다.
3
총 3단계의 프로그램을 완주할
용기와 끈기를 갖고 계신 분
카카오 테크 캠퍼스는 총 3단계 커리큘럼으로 기간이 길고, 점진적으로 학습 난이도가
어려워집니다.
개인의 시간과 노력이 적지 않게 필요하므로 프로그램을 완주할 끈기를 갖고 계신
분들께서 지원해 주시기 바랍니다.
서류 접수
지원서 및 자기소개서 제출
3월 2일 ~ 17일
코딩 테스트
온라인 테스트 진행
3월 16일 ~ 17일
최종 합격
합격 여부 개별 안내
3월 24일
지원하기
뉴스
FAQ
지원 자격
커리큘럼
카테고리명
수료혜택
안내
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
카카오 테크 캠퍼스
1기 수강생 모집 카카오 테크 캠퍼스
더 많은 소식이 궁금하다면?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요? 프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
A.
관련 전공을 하고 있지 않더라도... ~ 기술에 대한 원리를 이해 및 파악하고, 제공된 베이스코드를 기반으로 상용화 웹페이지를 구현하며, 실 사용자가 사용하는 서 비스를 기획-구현- 배포함으로써 실무 경험을 통한 문제 해결력을 기를 수 있습니다.
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
Q.
지역 대학생이라면 누구나 지원이 가능한건가요?
Q.
프로그램 참여를 위해 반드시 필요한 준비물이 있나요?
Q.
반드시 컴퓨터공학을 전공해야 지원이 가능한건가요?
이외에도 궁금한 점이 있다면 ?
1:1 문의 바로가기
1
2
3
4
5
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
브랜드 아이덴티티를 반영한 컬러 반영과 브랜드 핵심 가치 및 키워드를 통해
탐험과 모험을 마친 상징과 공통의 목표를 지닌 하나의 팀을 동시에 상징하는
‘깃발' 프레임을 활용, 젊은 연령층의 새로운 시도와 도전을 함께 도모하고자 합니다.
#동반 성장
#관계 형성
#공통 목표
About
Through self-directed learning and job-based team projects,
and by practicing collaboration and problem-solving,
you will build strong technical skills
and grow into a developer who creates a better world together with Kakao.
비대면 환경에서 여러 사람들과 진행하는
프로젝트에서는 협업 스킬이 기술만큼
중요합니다.
협업을 통한
문제해결
자세히 보기
자세히 보기
카카오의 개발자들이 업무를 수행하는 방식과
동일한 방식으로 프로젝트를 구성하여
학습합니다.
직무기반
팀 프로젝트
카카오는 대학생들이 시간과 공간의 제약 없이
실무에 가까운 교육을 경험할 수 있는 기회를
제공하고자 하였습니다.
그래서 카카오 테크 캠퍼스의 교육과정은 언제
어디서든 학습이 가능한 온라인 방식으로
진행됩니다.
자기주도적
온라인 학습
자기주도적 학습과 직무 기반의 팀 프로젝트,
협업과 문제 해결의 과정을 통해 기술 역량을 키우고
카카오와 함께 더 나은 세상을 만들 개발자로 성장합니다.
About
Program
Apply
Information
Continuous
지속적인
단계적 성장을 이룰 수 있도록
지속적인 개발자 교육을
제공합니다.
Differentiated
차별화된
동기 및 현업 멘토들과 함께하는,
차별화된 실무 기반의 학습을
경험하게 됩니다.
Collaborative
협력적인
카카오와 학교,
지역 간 협력을 통해
시너지를 만들어 나갑니다.
카카오는 지속적인 개발자 육성을 위한 차별화된 교육을 제공하고,
학교와 지역의 협력을 통해 함께 시너지를 만들어 나갑니다.
About
Program
Apply
Information
기술과 사람이 만드는
더 나은 세상
카카오는 급변하는 디지털 환경에 적합한
인재를 양성하고 사회에 배출하여,
IT 업계의 건강한 성장을 지원합니다.
About
Program
Apply
Information
Program
By learning the technical stack and building the Kakao Shopping web page using the provided base code,
participants gain hands-on experience in planning, developing, and deploying real user–facing services,
while strengthening their problem-solving skills.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트,
3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션
클로닝 개발 실습
신규 서비스
개발 프로젝트
상용서비스 개발 경험을
토대로 새로운 서비스를 기획 및 개발하는 프로젝트 수업
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써, 실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발
프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
카카오 테크 캠퍼스
FE · BE Roadmap
카카오 테크 캠퍼스는 트랙 별 1단계 - 웹 개발 기초 교육, 2단계 - 클론 프로젝트, 3단계 - 신규 서비스 개발 프로젝트로 구성되어 있습니다.
GOAL
START
신규 서비스
개발 프로젝트
상용서비스 개발 경험을 토대로 새로운
서비스를 기획 및 개발하는 프로젝트 수업
클론
프로젝트
학습한 기술 스택을 활용하여
상용 어플리케이션 클로닝 개발 실습
웹 개발
기초 교육
SW 직무 유형에 따른
기술 스택을 학습
카카오 테크 캠퍼스
FE · BE Track
기술 스택을 학습하고, 제공된 베이스 코드를 기반으로 카카오 쇼핑하기 웹페이지를 구현함으로써,
실 사용자를 위한 서비스를 기획-구현-배포하는 프로젝트 경험을 쌓고 문제 해결력을 기를 수 있습니다.
Front-End Track
Back-End Track
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 프론트엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 프론트엔드 기술 스택 :
HTML
CSS
JavaScript
React.js
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
HTML, CSS, React를 사용하여 페이지별 요구되는 기능을 단계별로 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 백엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
1단계
웹 개발 기초 교육 (10주)
온라인 영상강의 및 실습을 통해 웹 백엔드 개발에 기본이 되는 프로그래밍 언어를 이해하고 기본 문법을 학습합니다.
학습하게 될 웹 백엔드 기술 스택:
Java
MySQL
Spring
Rest-API
Git Hub
Git
2단계
클론 프로젝트 (6주)
카카오 상용 웹페이지를 구현하고 클라우드를 통해 배포하는 실습을 진행합니다.
웹 구현을 위한 개발 환경을 구축하고, 요구사항 검토 및 화면 설계를 통해 서비스를 이해합니다.
Java, JPA, Spring Boot를 기반으로 비즈니스 로직 및 REST API를 구현합니다.
3단계
신규 서비스 개발 프로젝트 (12주)
실 사용자를 위한 서비스를 직접 기획하고 설계, 구현, 배포하는 개발 경험을 쌓습니다.
웹 프론트엔드 개발자와 함께 팀을 구성하여 협업하는 방식을 학습합니다.
* 교육 내용은 일부 변경될 수 있습니다.
© Kakao Tech Campus. All rights reserved.
About
Program
Apply
Information
Apply
By learning the technical stack and building the Kakao Shopping web page using the provided base code,
participants gain hands-on experience in planning, developing, and deploying real user–facing services,
while strengthening their problem-solving skills.
Design Guide
By learning the technical stack and building the Kakao Shopping web page using the provided base code,
participants gain hands-on experience in planning, developing, and deploying real user–facing services,
while strengthening their problem-solving skills.
Typography / PC
Subtitle 1~4
H1~6
Subtitle 5~6
Body 1 ~ Caption
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.4 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.3= 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.45 = 행간
KakaoBig ExtraBold
KakaoBig Bold
KakaoBig Regular
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 1. 글자 크기 x 1.4, 2. 글자 크기 x 1.45 , 3. 글자 크기 x 1.5 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림, 반내림한 수치를 적용하여 되도록 짝수값을 유지한다.
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
English & Calender Number
Roboto 48 Bold
Roboto 40 Bold
Roboto 36 Bold
Roboto 32 Bold
Roboto 30 Medium
Roboto 28 Medium
Roboto 22 Medium
Roboto 18 Medium
Roboto 14 Medium
Roboto 15 Medium
Roboto 14 Medium
Roboto 13 Regular
Roboto 12 Regular
Window
NotoSans CJK 48 Bold
NotoSans CJK 40 Bold
NotoSans CJK 34 Bold
NotoSans CJK 30 Bold
NotoSans CJK 28 Medium
NotoSans CJK 26 Medium
NotoSans CJK 20 Medium
NotoSans CJK 18 Medium
NotoSans CJK 14 Medium
NotoSans CJK 16 Medium
NotoSans CJK 14 Medium
NotoSans CJK 13 Regular
NotoSans CJK 12 Regular
Mac
Apple SD Gothic 48 Bold
Apple SD Gothic 40 Bold
Apple SD Gothic 36 Bold
Apple SD Gothic 32 Bold
Apple SD Gothic 30 Medium
Apple SD Gothic 28 Medium
Apple SD Gothic 24 Medium
Apple SD Gothic 18 SemiBold
/ Apple SD Gothic 18 SemiBold
Apple SD Gothic 14 SemiBold
Apple SD Gothic 16 Bold
Apple SD Gothic 16 SemiBold
Apple SD Gothic 16 Regular
Apple SD Gothic 14 Regular
Apple SD Gothic 13 Regular
Apple SD Gothic 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
H7
Subtitle1
Subtitle2
Body1
Body2
Body3
Body4
Text Hierarchy
텍스트 위계는 미디움, 레귤러 서체와 검은색 (Gray-10_#1a1a1a), 회색 컬러의 조합으로 표현합니다.
Common
KakaoBig 100 ExtraBold
KakaoBig 60 ExtraBold
/ KakaoBig 60 Bold
KakaoBig 48 ExtraBold
KakaoBig 40 ExtraBold
KakaoBig 36 ExtraBold
/ KakaoBig 36 Bold
KakaoBig 32 ExtraBold
/ KakaoBig 32 Bold
KakaoBig 30 Bold
KakaoBig 28 Bold
KakaoBig 24 ExtraBold
/ KakaoBig 24 Bold
/ KakaoBig 24 Regular
KakaoBig 20 Bold
KakaoBig 18 ExtraBold
/ KakaoBig 18 Bold
/ KakaoBig 18 Regular
KakaoBig 14 Extrabold
KakaoBig 16 Bold /
KakaoBig 16 Bold
KakaoBig 14 Bold
/ KakaoBig 14 Regular
KakaoBig 13 Regular
KakaoBig 12 Regular
Scale categoty
H1
H2
H3
H4
H5
H6
Subtitle1
Subtitle2
Subtitle3
Subtitle4
Subtitle5
Subtitle6
Body1
Body2
Body3
Caption
국문 (관리자)
Apple SD Gothic Neo Bold
Apple SD Gothic Neo Medium
Apple SD Gothic Neo Regular
NotoSans CJK KR Bold
NotoSans CJK KR Medium
NotoSans CJK KR Regular
글자크기 x 1.5 = 행간
글자크기 x 1.5 = 행간
글자크기 x 1.45 = 행간
글자크기 x 1.4 = 행간
글자크기 x 1.4 = 행간
Roboto Bold
Roboto Medium
Roboto Regular
글자크기 x 1.5 = 행간
영문 / Calendar Number
글자크기 x 1.5 = 행간
Typeface
‘Apple SD Gothic Neo for Mac, Noto Sans for Windows 와 ‘Roboto’ 서체를 사용합니다. 국문은 ‘Apple 산돌고딕 Neo’ 서체를 사용하고 영문과 Calendar 숫자에는 ‘Roboto’ 서체를 사용합니다.
각 서체에서 볼드 웨이트는 가장 상위 개념인 서비스 타이틀에 제한적으로 사용하고, 콘텐츠 내에 강조 표현은 미디움 웨이트를 권장합니다.
행간값은 총 3가지 계산값 (글자 크기 x 1.4 : H1, H2, Subtitle1~4) , (글자 크기 x 1.45 : Subtitle4~5, H3~H6 - Caption (글자 크기 x 1.5) 값을 사용하며 결과값이 소수점으로 발생할 때에는 반올림한 수치를 적용합니다.
Color
Status Color
Background Color - Dim
모든 레이어 창 오픈 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 60%
RGB
0, 0, 0
Hex
#000000
Background Color - Dim_Loading
로딩 시, 아래와 같이 dim을 권장하여 사용합니다.
Dim - Opacity 10%
RGB
0, 0, 0
Hex
#000000
Background Color - Toast, Tooltip
toast 팝업 노출 시, 아래와 같은 컬러를 권장하여 사용합니다.
Dim - Opacity 80%
RGB
0, 0, 0
Hex
#000000
Effect Styles - Shadow
공통 그림자 효과로 사용합니다.
shadow - Opacity 16%
XYBS
0, 2, 8, 0
Hex
#000000
Effect Styles - Line
Line요소는 콘텐츠와 콘텐츠 사이를 나누는 Divider로써 활용하며 Dash:2, Gap:4를 유지합니다.
Line - Dash:2, Gap:4
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Line - Dash:2, Gap:4
RGBA
204, 204, 204, 1
Hex
#cccccc
Line - Dash:2, Gap:4
RGBA
153, 153, 153, 1
Hex
#999999
status_blue
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
status_blue_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
status_blue_lighter
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Status_Color_blue
진행 중의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
status_red
RGBA
255, 51, 51, 1
Hex
#ff3333
Red - 80
status_red_light
RGBA
255, 102, 102, 1
Hex
#ff6666
Red - 60
status_red_lighter
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red - 20
Status_Color_Red
부정, 에러 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Status_Color_Yellow
경고, 정보성 알림 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Yellow - 80
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 3
RGBA
255, 254, 247, 1
Hex
#FFFEF7
status_yellow
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
status_yellow_light
RGBA
255, 228, 51, 1
Hex
#ffe433
Yellow - 80
status_yellow_lighter
RGBA
255, 248, 204, 1
Hex
#fff8cc
Yellow - 20
status_green
RGBA
48, 203, 131, 1
Hex
#30CB83
Green - 40
status_green_light
RGBA
130, 237, 184, 1
Hex
#82EDB8
Green - 30
status_green_lighter
RGBA
189, 240, 215, 1
Hex
#BDF0D7
Green - 12
Status_Color_Green
긍정, 진행 완료 등의 상태 값일 때 활용합니다. 추가적인 색상이 필요한 Badge, Chips 등의 활용도 가능합니다.
Secondary_Color
메일링, 캘린더 등 Secondary 포인트 UI 요소로 활용합니다.
secondary_dark
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
secondary_primary
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
B
secondary_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
secondary_lighter
RGBA
178, 204, 255, 1
Hex
#b2ccff
Blue - 30
secondary_lightest
RGBA
230, 226, 255, 1
Hex
#E6E2FF
Blue - 10
secondary_white
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Sub_Color
보조 색상입니다. 메인 화면 요소를 보조해주는 색상으로 활용합니다.
sub_red
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
B
sub_red_light
purple - 100
RGBA
99, 75, 255, 1
Hex
#634BFF
sub_red_lighter
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
sub_green
RGBA
178, 204, 255, 1
Hex
#2ded8e
Blue - 30
B
sub_green_light
RGBA
124, 223, 174, 1
Hex
#7CDFAE
Blue - 10
sub_green_lighter
RGBA
250, 251, 255, 1
Hex
#FAFBFF
Blue - 2
Primary_Color
메일링, 캘린더 등 Primary 포인트 UI 요소로 활용합니다.
primary_dark
RGBA
255, 221, 0, 1
Hex
#ffdd00
Yellow - 100
primary
RGBA
255, 228, 51, 1
Hex
#ffe742
Yellow - 80
B
primary_light
RGBA
255, 235, 102, 1
Hex
#ffeb66
Yellow - 60
primary_lighter
RGBA
255, 245, 178, 1
Hex
#fff5b2
Yellow - 30
primary_lightest
RGBA
255, 252, 229, 1
Hex
#fffce5
Yellow - 10
primary_white
RGBA
255, 254, 247, 1
Hex
#FFFEF7
Yellow - 2
Grayscale
공통으로 사용되는 Gray 색상 입니다.
gray_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
gray_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
gray_darker
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
gray_dark
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_light
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
gray_lighter
RGBA
247, 247, 247, 1
Hex
#f7f7f7
Gray - 97
gray_lightest
RGBA
250, 250, 250, 1
Hex
#fafafa
Gray - 98
gray_white
RGBA
255, 255, 255, 1
Hex
#ffffff
Gray - 100
Font_Color
버튼을 제외한 모든 폰트 색상에 활용됩니다.
font_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
font_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
font_darker
RGBA
102, 102, 102, 1
Hex
#666666
Gray - 40
font_dark
RGBA
153, 153, 153, 1
Hex
#999999
Gray - 60
font_light
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
font_lighter
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
font_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
font_negative_light
RGBA
255, 204, 204, 1
Hex
#ffcccc
Red -20
font_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
font_positive_light
RGBA
204, 221, 255, 1
Hex
#ccddff
Blue - 20
Line_Color
공통으로 사용되는 Line 색상입니다.
line_black
RGBA
28, 28, 28, 1
Hex
#1a1a1a
Gray - 10
line_darkest
RGBA
76, 76, 76, 1
Hex
#4c4c4c
Gray - 30
line_darker
RGBA
179, 179, 179, 1
Hex
#b3b3b3
Gray - 70
line_dark
RGBA
204, 204, 204, 1
Hex
#cccccc
Gray - 80
line_light
RGBA
229, 229, 229, 1
Hex
#e5e5e5
Gray - 90
line_lighter
RGBA
240, 240, 240, 1
Hex
#f0f0f0
Gray - 94
line_lightest
RGBA
245, 245, 245, 1
Hex
#f5f5f5
Gray - 96
line_negative
RGBA
255, 128, 128, 1
Hex
#ff8080
Red - 50
line_positive
RGBA
51, 119, 255, 1
Hex
#3377ff
Blue - 80
line_positive_light
RGBA
102, 153, 255, 1
Hex
#6699ff
Blue - 60
Multi-Device Design
Our design guide has extensive experience in responsive design, optimizing for devices
like desktops and mobile phones.
Other Contents
본 작업은 카카오의 브랜드 자산을 기반으로, 디케이테크인 UX/UI 프로젝트로 확장해 완성되었습니다.
