쪽지발송 성공
Click here
재능넷 이용방법
재능넷 이용방법 동영상편
가입인사 이벤트
판매 수수료 안내
안전거래 TIP
재능인 인증서 발급안내

🌲 지식인의 숲 🌲

🌳 디자인
🌳 음악/영상
🌳 문서작성
🌳 번역/외국어
🌳 프로그램개발
🌳 마케팅/비즈니스
🌳 생활서비스
🌳 철학
🌳 과학
🌳 수학
🌳 역사
해당 지식과 관련있는 인기재능

JAVA,JSP,PHP,javaScript(jQuery), 등의 개발을 전문적으로 하는 개발자입니다^^보다 저렴한 금액으로, 최고의 퀄리티를 내드릴 것을 자신합니다....

안녕하세요.부동산, ​학원, 재고관리, ​기관/관공서, 기업, ERP, 기타 솔루션, 일반 서비스(웹, 모바일) 등다양한 분야에서 개발을 해왔습니...

 안녕하세요. 개발자 GP 입니다. 모든 사이트 개발은 웹사이트 제작시 웹표준을 준수하여 진행합니다.웹표준이란 국제표준화 단체...

CSS Grid: 반응형 갤러리 레이아웃 구현하기

2024-11-27 04:19:03

재능넷
조회수 263 댓글수 0

CSS Grid: 반응형 갤러리 레이아웃 구현하기 🎨

 

 

안녕하세요, 웹 디자인 열정 넘치는 여러분! 오늘은 정말 흥미진진한 주제로 여러분과 함께 시간을 보내려고 해요. 바로 CSS Grid를 사용해 멋진 반응형 갤러리 레이아웃을 만드는 방법에 대해 알아볼 거예요. 🚀

여러분, 혹시 인스타그램이나 핀터레스트 같은 사이트를 사용해보셨나요? 그 사이트들의 멋진 이미지 배열을 보면서 "어떻게 이렇게 예쁘게 만들었을까?"라고 궁금해하신 적 있으신가요? 오늘 우리는 그 비밀을 파헤쳐볼 거예요!

CSS Grid는 마치 마법 지팡이 같아요. 복잡해 보이는 레이아웃도 손쉽게 만들 수 있게 해주거든요. 그리고 이 마법 지팡이로 우리는 오늘 아주 멋진 갤러리를 만들어볼 거예요. 😉

이 여정을 통해 여러분은 단순히 기술을 배우는 것을 넘어서, 웹 디자인의 예술가가 되는 첫 걸음을 내딛게 될 거예요. 여러분의 창의력을 마음껏 발휘할 수 있는 기회가 될 거예요!

그럼 이제 CSS Grid의 세계로 빠져볼까요? 준비되셨나요? 자, 그럼 시작해볼게요! 🎬

1. CSS Grid: 웹 레이아웃의 혁명 🌟

CSS Grid가 무엇인지 궁금하신가요? 간단히 말해서, CSS Grid는 웹 페이지의 레이아웃을 쉽고 효율적으로 만들 수 있게 해주는 CSS의 레이아웃 시스템이에요. 마치 우리가 테이블을 그리듯이, 웹 페이지를 행과 열로 나누어 요소들을 배치할 수 있게 해주죠.

CSS Grid는 2017년에 주요 브라우저들이 지원하기 시작했어요. 그 이전에는 웹 개발자들이 복잡한 레이아웃을 만들기 위해 float나 position 같은 속성들을 사용해야 했죠. 하지만 이제는 Grid 하나로 거의 모든 레이아웃을 쉽게 만들 수 있게 되었어요!

🎓 CSS Grid의 주요 특징:

  • 2차원 레이아웃 시스템 (행과 열을 동시에 제어)
  • 유연한 단위 사용 가능 (fr, %, px 등)
  • 간격(gap) 조절 용이
  • 아이템 배치의 자유로움
  • 반응형 디자인에 최적화

CSS Grid를 사용하면, 마치 레고 블록을 조립하듯 웹 페이지의 요소들을 자유롭게 배치할 수 있어요. 이는 특히 갤러리 레이아웃을 만들 때 아주 유용하답니다. 여러 크기의 이미지들을 깔끔하고 균형 잡힌 모습으로 배열할 수 있거든요.

예를 들어, 재능넷(https://www.jaenung.net)과 같은 재능 공유 플랫폼에서 다양한 재능을 가진 사람들의 작품이나 포트폴리오를 전시할 때 CSS Grid를 활용하면 아주 멋진 갤러리를 만들 수 있어요. 각각의 재능이 돋보이도록 크기와 배치를 조절할 수 있죠.

CSS Grid는 단순히 기술적인 도구가 아니에요. 이것은 여러분의 창의성을 웹 페이지에 표현할 수 있게 해주는 강력한 도구입니다. 마치 화가가 캔버스 위에 자유롭게 그림을 그리듯, 여러분도 웹 페이지라는 캔버스 위에 여러분만의 독특한 디자인을 그려낼 수 있어요.

자, 이제 CSS Grid의 기본 개념을 알았으니, 본격적으로 반응형 갤러리 레이아웃을 만들어볼까요? 여러분의 상상력을 마음껏 펼칠 준비가 되셨나요? 그럼 다음 단계로 넘어가볼게요! 🚀

2. CSS Grid의 기본 구조 이해하기 🏗️

CSS Grid를 사용하기 전에, 먼저 그 기본 구조를 이해해야 해요. Grid는 컨테이너(부모 요소)와 아이템(자식 요소)으로 구성되어 있어요. 마치 큰 상자 안에 작은 상자들을 넣는 것처럼 말이죠!

🧱 Grid 구조의 주요 요소:

  • Grid 컨테이너: Grid 레이아웃을 적용할 부모 요소
  • Grid 아이템: Grid 컨테이너 안에 배치될 자식 요소들
  • Grid 라인: Grid를 구성하는 가로, 세로 선
  • Grid 트랙: 두 개의 Grid 라인 사이의 공간 (행 또는 열)
  • Grid 셀: 네 개의 Grid 라인으로 둘러싸인 가장 작은 단위 공간
  • Grid 영역: 여러 개의 Grid 셀을 합친 직사각형 영역

이제 이 구조를 시각적으로 표현해볼게요. 아래의 SVG 그림을 보면 Grid의 기본 구조를 더 쉽게 이해할 수 있을 거예요.

CSS Grid 기본 구조 Grid 컨테이너 Grid 셀 Grid 영역 Grid 셀 Grid 라인 Grid 트랙 (열) Grid 트랙 (행)

이 구조를 이해하는 것이 CSS Grid 마스터가 되는 첫 걸음이에요! 각 요소들이 어떻게 상호작용하는지 알면, 여러분이 원하는 대로 레이아웃을 자유자재로 만들 수 있게 될 거예요.

예를 들어, 재능넷에서 다양한 재능을 가진 사람들의 작품을 전시한다고 생각해볼까요? Grid 컨테이너는 전체 갤러리가 되고, 각각의 Grid 셀은 개별 작품을 담는 공간이 됩니다. Grid 영역을 활용하면 특별히 강조하고 싶은 작품을 더 크게 표시할 수도 있겠죠.

이제 기본 구조를 알았으니, 실제로 CSS Grid를 어떻게 사용하는지 알아볼까요? 다음 섹션에서는 Grid 컨테이너를 설정하고 Grid 아이템을 배치하는 방법을 자세히 살펴볼 거예요. 여러분의 창의력을 마음껏 발휘할 준비가 되셨나요? 그럼 계속해서 CSS Grid의 세계로 더 깊이 들어가볼까요? 🚀

3. Grid 컨테이너 설정하기 🎨

자, 이제 본격적으로 Grid 컨테이너를 설정해볼 차례예요! Grid 컨테이너를 설정하는 것은 마치 캔버스를 준비하는 것과 같아요. 여러분의 창의적인 작품을 담을 기본 틀을 만드는 거죠.

Grid 컨테이너를 설정하는 가장 기본적인 방법은 display: grid; 속성을 사용하는 거예요. 이렇게 하면 해당 요소가 Grid 컨테이너가 되고, 그 안의 자식 요소들은 자동으로 Grid 아이템이 됩니다.

🖌️ Grid 컨테이너 설정의 기본 속성들:

  • display: grid; - Grid 컨테이너로 설정
  • grid-template-columns - 열(column)의 크기와 개수 정의
  • grid-template-rows - 행(row)의 크기와 개수 정의
  • gap - Grid 아이템 사이의 간격 설정
  • justify-content - 수평 방향 정렬
  • align-content - 수직 방향 정렬

이제 이 속성들을 사용해서 실제로 Grid 컨테이너를 만들어볼까요? 아래의 코드를 보세요:


.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  padding: 20px;
}
  

이 코드가 하는 일을 하나씩 살펴볼게요:

  • display: grid; - 이 클래스를 가진 요소를 Grid 컨테이너로 만들어요.
  • grid-template-columns: repeat(3, 1fr); - 3개의 열을 만들고, 각 열의 너비를 동일하게 설정해요. fr은 "fraction"의 약자로, 사용 가능한 공간을 비율로 나눕니다.
  • grid-template-rows: auto; - 행의 높이를 자동으로 설정해요. 콘텐츠의 높이에 따라 자동으로 조절됩니다.
  • gap: 20px; - Grid 아이템 사이의 간격을 20px로 설정해요.
  • padding: 20px; - Grid 컨테이너 자체에 20px의 안쪽 여백을 줍니다.

이제 이 설정을 시각화해볼까요? 아래의 SVG 이미지를 보세요:

Grid 컨테이너 설정 예시 Grid 컨테이너 Grid 아이템 Grid 아이템 Grid 아이템 3개의 열 (1fr 1fr 1fr) 자동 행 높이

이렇게 설정된 Grid 컨테이너는 마치 잘 정돈된 전시장 같아요. 각각의 Grid 아이템(여기서는 초록색 박스들)이 균형 잡힌 모습으로 배치되어 있죠. 이런 구조는 재능넷과 같은 플랫폼에서 다양한 재능을 가진 사람들의 작품을 전시하기에 아주 적합해요.

하지만 여기서 끝이 아니에요! Grid의 진정한 매력은 이 기본 구조를 바탕으로 더욱 창의적인 레이아웃을 만들 수 있다는 거죠. 예를 들어, 특정 아이템을 더 크게 만들거나, 아이템의 위치를 자유롭게 바꿀 수 있어요.

다음 섹션에서는 Grid 아이템을 더 자세히 다루고, 어떻게 이 기본 구조를 활용해 멋진 갤러리 레이아웃을 만들 수 있는지 알아볼 거예요. 여러분의 상상력을 자극할 준비가 되셨나요? 그럼 계속해서 CSS Grid의 마법 같은 세계로 더 깊이 들어가볼까요? 🚀

4. Grid 아이템 배치하기 🧩

자, 이제 우리의 Grid 컨테이너가 준비되었으니, 그 안에 Grid 아이템들을 배치해볼 차례예요! Grid 아이템을 배치하는 것은 마치 퍼즐 조각을 맞추는 것과 같아요. 각 아이템을 어디에 어떻게 놓을지 결정하면서 전체적인 그림을 완성해나가는 거죠.

Grid 아이템을 배치할 때는 주로 다음과 같은 속성들을 사용해요:

🧩 Grid 아이템 배치 속성들:

  • grid-column-start - 아이템이 시작할 열 라인 번호
  • grid-column-end - 아이템이 끝날 열 라인 번호
  • grid-row-start - 아이템이 시작할 행 라인 번호
  • grid-row-end - 아이템이 끝날 행 라인 번호
  • grid-column - grid-column-startgrid-column-end를 한 번에 지정
  • grid-row - grid-row-startgrid-row-end를 한 번에 지정
  • grid-area - 행 시작 / 열 시작 / 행 끝 / 열 끝을 한 번에 지정

이 속성들을 사용해서 실제로 Grid 아이템을 배치해볼까요? 아래의 코드를 보세요:


.gallery-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.gallery-item:nth-child(2) {
  grid-column: 3;
  grid-row: 1 / 3;
}

.gallery-item:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

.gallery-item:nth-child(4) {
  grid-column: 2 / 4;
  grid-row: 3;
}
  

이 코드가 하는 일을 하나씩 살펴볼게요:

  • 첫 번째 아이템: 1열부터 3열 전까지, 1행부터 3행 전까지 차지합니다. 즉, 2x2 크기의 큰 아이템이 됩니다.
  • 두 번째 아이템: 3열에 위치하며, 1행부터 3행 전까지 차지합니다. 세로로 긴 아이템이 됩니다.
  • 세 번째 아이템: 1열, 3행에 위치합니다.
  • 네 번째 아이템: 2열부터 4열 전까지, 3행에 위치합니다. 가로로 긴 아이템이 됩니다.

이제 이 배치를 시각화해볼까요? 아래의 SVG 이미지를 보세요:

Grid 아이템 배치 예시 아이템 1 아이템 2 아이템 3 아이템 4 Grid 컨테이너 3개의 행 3개의 열

이렇게 배치된 Grid 아이템들은 마치 잘 구성된 갤러리 전시장 같아 보이지 않나요? 각각의 아이템이 다른 크기와 위치를 가지고 있어 시선을 끌면서도, 전체적으로 균형 잡힌 모습을 보여줍니다.

이런 레이아웃은 재능넷과 같은 플랫폼에서 다양한 재능을 가진 사람들의 작품을 효과적으로 전시하는 데 아주 유용해요. 예를 들어, 가장 인기 있는 작품을 큰 크기의 아이템 1에 배치하고, 다른 작품들을 나머지 공간에 배치할 수 있죠.

하지만 여기서 끝이 아니에요! Grid의 진정한 매력은 이런 기본 구조를 바탕으로 더욱 다양하고 창의적인 레이아웃을 만들 수 있다는 거예요. 예를 들어, 미디어 쿼리를 사용해 화면 크기에 따라 레이아웃을 변경하거나, Grid 템플릿 영역을 사용해 더 복잡한 레이아웃을 만들 수 있어요.

다음 섹션에서는 이 기본 구조를 바탕으로 어떻게 반응형 갤러리 레이아웃을 만들 수 있는지 알아볼 거예요. 여러분의 창의력을 더욱 자극할 준비가 되셨나요? 그럼 CSS Grid의 마법 같은 세계를 계속 탐험해볼까요? 🚀

5. 반응형 갤러리 레이아웃 만들기 📱💻

자, 이제 우리가 배운 Grid의 기본 개념을 활용해 멋진 반응형 갤러리 레이아웃을 만들어볼 거예요. 반응형 디자인은 다양한 화면 크기에 맞춰 레이아웃이 자동으로 조정되는 것을 말해요. 이는 모바일 기기부터 대형 데스크톱 모니터까지 모든 사용자에게 최적의 경험을 제공하는 데 필수적이죠.

CSS Grid를 사용하면 반응형 레이아웃을 만드는 것이 정말 쉬워져요! 주로 다음과 같은 기술들을 사용합니다:

🔧 반응형 Grid 레이아웃 기술:

  • 미디어 쿼리 (Media Queries)
  • minmax() 함수
  • auto-fit과 auto-fill
  • repeat() 함수

이제 이 기술들을 사용해 실제로 반응형 갤러리 레이아웃을 만들어볼게요. 아래의 코드를 보세요:


.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.gallery-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gallery-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .gallery-container {
    grid-template-columns: 1fr;
  }
}
  

이 코드가 하는 일을 자세히 살펴볼게요:

  • grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - 이 설정은 각 열의 최소 너비를 250px로 설정하고, 가능한 많은 열을 만듭니다. 남는 공간은 균등하게 분배됩니다.
  • gap: 20px; - Grid 아이템 사이의 간격을 20px로 설정합니다.
  • object-fit: cover; - 이미지가 컨테이너를 꽉 채우도록 합니다.
  • 미디어 쿼리를 사용해 화면 크기에 따라 레이아웃을 조정합니다. 태블릿 크기에서는 열의 최소 너비를 200px로 줄이고, 모바일 크기에서는 한 열로 변경합니다.

이제 이 레이아웃이 어떻게 작동하는지 시각화해볼까요? 아래의 SVG 이미지들을 보세요:

데스크톱 레이아웃 데스크톱 (3열)
태블릿 레이아웃 태블릿 (2열)
모바일 레이아웃 모바일 (1열)

이렇게 만들어진 반응형 갤러리 레이아웃은 어떤 디바이스에서도 멋지게 보일 거예요! 데스크톱에서는 여러 열로 많은 아이템을 한 번에 보여주고, 모바일에서는 한 열로 깔끔하게 정리되죠.

이런 레이아웃은 재능넷과 같은 플랫폼에서 정말 유용해요. 사용자들은 큰 화면에서는 다양한 재능을 한눈에 볼 수 있고, 모바일에서는 스크롤하면서 하나씩 자세히 볼 수 있죠. 이는 사용자 경험을 크게 향상시킵니다.

하지만 여기서 멈추지 마세요! CSS Grid의 가능성은 무궁무진해요. 예를 들어, Grid 템플릿 영역을 사용해 더 복잡한 레이아웃을 만들거나, Grid 아이템의 정렬을 조정해 더 다이나믹한 디자인을 만들 수 있어요.

이제 여러분은 CSS Grid를 사용해 멋진 반응형 갤러리 레이아웃을 만들 수 있게 되었어요. 이 지식을 바탕으로 여러분만의 창의적인 디자인을 만들어보세요. 웹 디자인의 무한한 가능성이 여러분을 기다리고 있어요! 🌟

6. 마무리: CSS Grid의 무한한 가능성 🌈

여러분, 정말 대단해요! 우리는 함께 CSS Grid의 기본 개념부터 시작해 멋진 반응형 갤러리 레이아웃을 만드는 방법까지 배웠어요. 이제 여러분은 웹 디자인의 새로운 차원을 열 수 있는 강력한 도구를 손에 쥐게 된 거예요.

CSS Grid는 단순한 레이아웃 도구 그 이상이에요. 이것은 여러분의 창의성을 웹 페이지에 표현할 수 있게 해주는 캔버스와 같은 존재죠. 여러분이 상상할 수 있는 거의 모든 레이아웃을 Grid로 구현할 수 있어요.

🎨 CSS Grid로 할 수 있는 더 많은 것들:

  • 복잡한 매거진 스타일 레이아웃 만들기
  • Grid 템플릿 영역을 사용한 동적 레이아웃 구성
  • Grid와 Flexbox를 조합한 하이브리드 레이아웃
  • Grid를 활용한 애니메이션 효과 구현
  • Grid와 CSS 변수를 활용한 테마 변경 기능

우리가 만든 반응형 갤러리 레이아웃은 시작에 불과해요. 이를 기반으로 여러분만의 독특한 아이디어를 더해 더욱 멋진 디자인을 만들어보세요. 예를 들어, 재능넷 플랫폼에서는 이 레이아웃을 확장해 사용자의 프로필 페이지나 포트폴리오 섹션을 만들 수 있을 거예요.

기억하세요, 웹 디자인에서 가장 중요한 것은 사용자 경험이에요. CSS Grid를 사용해 아름다우면서도 기능적인 레이아웃을 만들어 사용자들에게 최고의 경험을 선사하세요.

마지막으로, 웹 기술은 계속해서 발전하고 있어요. CSS Grid도 앞으로 더 많은 기능이 추가될 거예요. 항상 새로운 것을 배우고 실험하는 자세를 가지세요. 그것이 바로 훌륭한 웹 디자이너와 개발자가 되는 길이에요.

여러분의 창의성과 CSS Grid의 힘을 결합해 웹의 미래를 만들어가세요. 여러분이 만들 멋진 프로젝트들이 정말 기대돼요! 항상 열정을 잃지 말고, 계속해서 도전하세요. 여러분의 무한한 가능성을 믿습니다. 화이팅! 🚀🌟

관련 키워드

  • CSS Grid
  • 반응형 디자인
  • 웹 레이아웃
  • 갤러리 레이아웃
  • Grid 컨테이너
  • Grid 아이템
  • 미디어 쿼리
  • minmax() 함수
  • auto-fit
  • repeat() 함수

지식의 가치와 지적 재산권 보호

자유 결제 서비스

'지식인의 숲'은 "이용자 자유 결제 서비스"를 통해 지식의 가치를 공유합니다. 콘텐츠를 경험하신 후, 아래 안내에 따라 자유롭게 결제해 주세요.

자유 결제 : 국민은행 420401-04-167940 (주)재능넷
결제금액: 귀하가 받은 가치만큼 자유롭게 결정해 주세요
결제기간: 기한 없이 언제든 편한 시기에 결제 가능합니다

지적 재산권 보호 고지

  1. 저작권 및 소유권: 본 컨텐츠는 재능넷의 독점 AI 기술로 생성되었으며, 대한민국 저작권법 및 국제 저작권 협약에 의해 보호됩니다.
  2. AI 생성 컨텐츠의 법적 지위: 본 AI 생성 컨텐츠는 재능넷의 지적 창작물로 인정되며, 관련 법규에 따라 저작권 보호를 받습니다.
  3. 사용 제한: 재능넷의 명시적 서면 동의 없이 본 컨텐츠를 복제, 수정, 배포, 또는 상업적으로 활용하는 행위는 엄격히 금지됩니다.
  4. 데이터 수집 금지: 본 컨텐츠에 대한 무단 스크래핑, 크롤링, 및 자동화된 데이터 수집은 법적 제재의 대상이 됩니다.
  5. AI 학습 제한: 재능넷의 AI 생성 컨텐츠를 타 AI 모델 학습에 무단 사용하는 행위는 금지되며, 이는 지적 재산권 침해로 간주됩니다.

재능넷은 최신 AI 기술과 법률에 기반하여 자사의 지적 재산권을 적극적으로 보호하며,
무단 사용 및 침해 행위에 대해 법적 대응을 할 권리를 보유합니다.

© 2024 재능넷 | All rights reserved.

댓글 작성
0/2000

댓글 0개

해당 지식과 관련있는 인기재능

안녕하세요.자기소개는 아래에 썼으니 참고부탁드리구요.(가끔 개인적 사정으로 인해 연락을 못받거나 답변이 늦어질 수 있습니다. 양해부탁...

워드프레스를 설치는 했지만, 그다음 어떻게 해야할지 모르시나요? 혹은 설치가 어렵나요?무료 워드프레스부터 프리미엄 테마까지 설치하여 드립니...

○ 2009년부터 개발을 시작하여 현재까지 다양한 언어와 기술을 활용해 왔습니다. 특히 2012년부터는 자바를 중심으로 JSP, 서블릿, 스프링, ...

 기본 작업은 사이트의 기능수정입니다.호스팅에 보드 설치 및 셋팅. (그누, 제로, 워드, 기타 cafe24,고도몰 등)그리고 각 보드의 대표적인 ...

📚 생성된 총 지식 9,813 개

  • (주)재능넷 | 대표 : 강정수 | 경기도 수원시 영통구 봉영로 1612, 7층 710-09 호 (영통동) | 사업자등록번호 : 131-86-65451
    통신판매업신고 : 2018-수원영통-0307 | 직업정보제공사업 신고번호 : 중부청 2013-4호 | jaenung@jaenung.net

    (주)재능넷의 사전 서면 동의 없이 재능넷사이트의 일체의 정보, 콘텐츠 및 UI등을 상업적 목적으로 전재, 전송, 스크래핑 등 무단 사용할 수 없습니다.
    (주)재능넷은 통신판매중개자로서 재능넷의 거래당사자가 아니며, 판매자가 등록한 상품정보 및 거래에 대해 재능넷은 일체 책임을 지지 않습니다.

    Copyright © 2024 재능넷 Inc. All rights reserved.
ICT Innovation 대상
미래창조과학부장관 표창
서울특별시
공유기업 지정
한국데이터베이스진흥원
콘텐츠 제공서비스 품질인증
대한민국 중소 중견기업
혁신대상 중소기업청장상
인터넷에코어워드
일자리창출 분야 대상
웹어워드코리아
인터넷 서비스분야 우수상
정보통신산업진흥원장
정부유공 표창장
미래창조과학부
ICT지원사업 선정
기술혁신
벤처기업 확인
기술개발
기업부설 연구소 인정
마이크로소프트
BizsPark 스타트업
대한민국 미래경영대상
재능마켓 부문 수상
대한민국 중소기업인 대회
중소기업중앙회장 표창
국회 중소벤처기업위원회
위원장 표창