Duolingo
흰 종이 위에 그려진 장난기 넘치는 학급 마스코트
듀오링고의 인터페이스는 마치 어린이 그림책처럼 디자인되었습니다. 하얀 종이 바탕에 통통하고 둥근 글꼴, 그리고 정답을 떠올리게 하는 풍부한 초록색 한 가지 색상이 사용되었습니다. 본문은 차분한 중간 회색 톤으로 처리되어 초록색과 강조 색상인 파란색이 감정적인 역할을 담당합니다. 초록색은 학습 진행 상황과 제목에, 파란색은 클릭 가능한 링크와 추가 작업에 사용됩니다. 구성 요소들은 알약 모양이나 큼직하고 둥근 모서리에 두꺼운 검정색 또는 색깔 있는 테두리가 있는 형태로 디자인되어, 각 버튼이 평면적인 UI 컨트롤이라기보다는 페이지에 붙인 스티커처럼 느껴집니다.
각 섹션은 페이지 전체 너비를 차지하며, 세로로 한 열에 배열됩니다. 각 섹션의 높이는 약 800픽셀입니다. 콘텐츠의 최대 너비는 중앙 정렬 시 약 1픽셀입니다. 왼쪽에는 텍스트가, 오른쪽에는 이미지가 번갈아 배치되어 충분한 세로 공간(섹션 간 80픽셀)을 제공합니다. 그리드 카드나 다단 레이아웃은 사용하지 않고, 각 섹션은 하나의 텍스트 블록과 하나의 이미지로 구성됩니다. 내비게이션은 로고와 언어 선택기가 있는 최소한의 상단 바 형태로, 섹션 사이에 고정된 막대로 표시됩니다. 바닥글은 페이지 전체 너비를 가로지르는 녹색 띠입니다. 제목, 단락, 클릭 유도 문구, 이미지, 반복이라는 편집 리듬을 따릅니다.
이 책의 삽화는 둥근 기하학적 형태, 굵은 검은색 윤곽선, 그리고 인터페이스 자체에는 나타나지 않는 분홍색, 보라색, 노란색, 주황색, 파란색의 보색 팔레트를 특징으로 하는 평면적인 2차원 마스코트 캐릭터(부엉이 듀엣과 다양한 사람 형상)를 사용합니다. 삽화는 각 섹션의 오른쪽 텍스트 옆에 순백색 배경 위에 배치되며, 별도의 배경이나 컨테이너가 없습니다. 사진은 사용되지 않고, 캐릭터 자체가 시각적 콘텐츠 역할을 합니다. 아이콘은 마스코트 스타일에 맞춰 굵은 윤곽선을 사용합니다. 이미지 밀도는 적당하며, 각 섹션에는 캐릭터의 큰 삽화 하나가 있고, 나머지 페이지는 타이포그래피와 여백으로 구성됩니다.
팔레트
상표
- Eager Green
#58cc02— 녹색은 링크, 태그 및 짧은 문구를 강조하는 데 사용됩니다. 클릭 유도 문구의 기본 색상으로 사용해서는 안 됩니다. - Storybook Green
#d7ffb8— 밝은 표면에 은은한 하이라이트가 들어가 있고, 바닥글의 탐색 레이블 뒤에는 미묘한 배경색이 사용되었습니다.
중립적
- Spark Blue
#1cb0f6— 파란색은 링크, 태그 및 짧은 문구를 강조하는 데 사용됩니다. 클릭 유도 문구의 기본 색상으로 사용해서는 안 됩니다. - Fresh Leaf
#a5ed6e— 녹색은 링크, 태그 및 짧은 문구를 강조하는 데 사용됩니다. 클릭 유도 문구의 기본 색상으로 사용해서는 안 됩니다. - Night Ink
#000437— 링크, 태그 및 짧게 강조 표시된 문구는 보라색으로 강조 표시됩니다. - Paper White
#ffffff— 페이지 캔버스, 판지 표면, 녹색/어두운 배경의 버튼 텍스트. - Charcoal
#4b4b4b— 히어로 헤더 및 본문 텍스트 - 색상이 있는 헤드라인이 돋보이도록 하는 범용 다크 텍스트입니다. - Pencil Gray
#777777— 본문은 눈에 잘 띄지 않는 글자로 강조되어 있고, 보조적인 설명 텍스트는 배경으로 물러나 있어 색상이 있는 요소들이 더욱 두드러지게 나타납니다.
타이포그래피
13픽셀에서 64픽셀로 · 7단계
- feather — 대사: Inter · 요점 700 · "무료. 재미있고. 효과적입니다." 및 "듀오링고 영어 테스트"와 같은 섹션 제목은 맞춤형 둥근 글꼴을 사용하여 브랜드에 장난스럽고 친근하며 마스코트 같은 스타일을 부여합니다. 적절한 굵기의 "Feather Bold" 또는 "Nunito Black"으로 교체하십시오. 자간: -0.0200em
- duolingo-sans — 대사: Inter · 요점 500 · 본문 단락과 탐색 링크는 17px/500 크기의 기하학적 산세리프 글꼴을 사용하여 가독성을 유지하면서 700 라인 두께로 중요한 내용을 강조합니다. 'DIN Next', 'Inter' 또는 'Nunito Sans'로 교체하십시오.
- duolingo-sans — 대사: Inter · 요점 700 · 모든 글자의 두께는 700으로 설정했습니다. 내비게이션 레이블의 대문자는 15px(0.0530em), 소제목은 19px와 32px, 링크 강조는 13px입니다. 본문과 동일한 글꼴을 사용하며, 글꼴 자체가 변경된 것이 아니라 두께만 다르게 적용했습니다. 내비게이션 레이블의 대문자는 0.0530em의 자간으로 설정했습니다.
간격과 형태
| 목적 | 의미 |
|---|---|
| 밀도 | 밀집한 |
| 기본 단계 | 12px |
| 버튼 반경 | 12px |
| 카드 반경 | 12px |
| 그림자 | 아니요 - 그림자 대신 테두리를 사용합니다. |
| 구간 사이 | 80-120px |
| 페이지 너비 | 1200px |
AI가 Duolingo 스타일로 웹사이트를 구축하고 내용을 채워줍니다.
- 제품 및 게시물을 링크를 통해 Instagram, TikTok, Facebook 에 올려주세요.
- 이전 사이트의 콘텐츠를 전송하세요. 주소만 지정하면 됩니다.
- 최신 디자인과 최고의 엔진인 React ( Next.js)를 기반으로 서버 렌더링 및 SEO 최적화 기능을 기본 제공합니다.
- 검색 결과 최적화 및 신경망 기반 추천 기능을 완벽하게 자동화했습니다.
비슷한 스타일
- Family — 크림색 양피지에 그려진 동화책의 한 페이지
- Say Briefly — 크림색 종이에 그린 크리에이티브 에이전시 스케치북
- Flying Papers — 토요일 아침 만화 속 고백
- Portrait — 크림색 종이에 폴라로이드 사진으로 담아낸 추억들이 벽처럼 펼쳐져 있다. 밝은 크림색 스크랩북에는 짙은 파란색 잉크가 유일한 글자이자, 유일한 선이자, 유일한 테두리 색깔로 사용되었다. 그리고 "등록" 버튼과 기울임체로 쓰인 "영원히"라는 단어에 단 한 번, 다시는 나타나지 않을 손으로 그린 무지개가 있을 뿐이다.
- Karl — 화창한 날의 3D 팝업북 스타일 디오라마
- Navigate — 게시판에 붙어 있는 커다란 스티커 세트: 크고 기괴한 글꼴, 모두 태블릿 형태, 그리고 로고처럼 반복되는 다섯 가지 색상의 아이콘
- Monte — 녹슨 듯한 빛깔이 감도는 해안가의 아침
- MotherDuck — 크림색 종이에 색연필로 코딩된 터미널
- Wise Design — 세계적인 거리의 네온사인으로 빛나는 시장 가판대 - 북적이는 시장에서 눈에 띄게 밝은 녹색 간판이 눈길을 사로잡고, 그 뒤로는 세련된 제품 사용자 인터페이스가 은밀하게 나타난다.
- Hatch — 손으로 그린 듯한 사미즈다트 스타일 디자인에 파스텔 톤의 사탕 그릇이 어우러져 있습니다. 크림색 종이 위에 민트색 포인트, 색종이 조각, 알약 모양의 행동 촉구 문구가 장식되어 있고, 크고 굵은 세리프체 글씨가 재미를 암시하며, 파란색 마스코트가 구석에서 윙크하고 있습니다.
- Superr — 따뜻한 오후 햇살에 비친 학교 공책. 크림색 페이지, 뚜껑 없는 주황색 마커, 그리고 떼어낼 준비가 된 코팅된 이름 스티커 더미.
- Mews — 새벽녘, 분홍빛으로 물든 호텔 운영 관리 센터. 흰 벽으로 둘러싸인 햇살 가득한 작업 공간에는 굵은 검정 활자체, 따뜻한 크림색 카드, 그리고 강렬한 핑크색 버튼 하나가 각 화면을 장식하고 있다. 기업의 절제된 분위기보다는 장난기 넘치는 자신감이 느껴진다.