반응형
반응형

마인크래프트 하면서 영어 배운다…알레프랩 와이콤비네이터에 ‘낙점’

 

 

https://www.mk.co.kr/news/business/11443250

 

마인크래프트 하면서 영어 배운다…알레프랩 와이콤비네이터에 ‘낙점’ - 매일경제

게임형 AI 학습 에이전트 크루캐피탈이어 후속 투자 유치 게임·언어·과목 등 확장 계획

www.mk.co.kr

게임형 인공지능(AI) 스타트업 알레프 랩(Aleph Lab)이 미국 실리콘밸리 대표 스타트업 액셀러레이터인 와이콤비네이터(YC)에 낙점됐다.

알레프랩은 올해 가을(F25) 와이콤비네이터 배치 프로그램에 선정돼 후속 투자를 유치했다고 16일 밝혔다. 지난 8월 설립 직후 크루캐피탈(Krew Capital)로부터 첫 투자를 받은 지 약 한 달 만이다.

알레프 랩은 아이들이 좋아하는 게임을 통해 자연스럽게 영어를 습득하는 경험을 목표로, AI 원어민 친구와 함께 게임 마인크래프트 안에서 실시간으로 대화하며 영어를 배우는 학습 서비스 ‘알레프 키즈(Aleph Kids)’를 개발하고 있다. 연내에 게임 플랫폼 ‘로블록스’에서도 서비스를 지원할 계획이다.

알레프 키즈의 첫 번째 AI 원어민 친구 ‘애니’(Annie)는 단순한 대화형 챗봇이 아닌 AI 에이전트로, 주변 환경을 인식해 아이의 답변을 유도하는 질문을 생성하며 자연스러운 언어 학습을 설계했다.

학습자의 흥미, 언어 수준, 게임 상황을 실시간으로 분석해 맞춤형 학습 커리큘럼을 생성하고, 놀면서 배우는 경험(learn through play)을 제공하는 것이 목표다.

투자금은 이후 로블록스 등 인기 게임 속 AI 친구 출시, 스페인어와 프랑스어 등 언어 확장, 수학·과학 등 과목 추가, 성인 대상 학습 서비스 출시 등 제품 확장에 활용될 예정이다.

장한님·한관엽 공동대표는 “아이들이 값비싼 해외 영어캠프나 유학을 가지 않더라도, 언제 어디서나 AI 원어민 친구와 함께 놀면서 자연스럽게 영어 실력을 키우고 유창해질 수 있도록 하겠다”며 “아이들이 해외에 나가서 자신감 있게 영어로 대화하고, 학업과 커리어에서 더 많은 선택지를 가질 수 있는 세상을 만들 것”이라고 밝혔다.

반응형
반응형

10년 빨리
찾아온 미래를 직시하라.
우리는 시간이 일정한 힘이라고 배웠다.
그러나 시간에 대한 우리의 인식은 일정하지 않다.
나이가 들수록 과거가 차지하는 비중은 커지고,
세월은 더 빨리 흐른다. 아침에는 유치원에
처음 등원하는 아들과 헤어지면서 뽀뽀를
해줬는데, 오후에는 그 아들이 5학년이
되어 집에 돌아오는 식이다.


- 스콧 갤러웨이의《거대한 가속》중에서 -


* 나이가 들면
시간이 빨리 간다고 합니다.
그야말로 '거대한 가속'을 실감하게 됩니다.
'유치원 아이가 반나절 만에 5학년이 되어 돌아온다'는
말이 결코 과장이 아닙니다. 초등학교 5학년이던
어린 시절이 엊그제 같은데 머리엔 흰 눈이 내렸습니다.
그러나 아무리 시간이 빨리 흘러도 천천히 걷는 시간이
필요합니다. 천천히, 아주 천천히 걸으면
시간이 거꾸로 흐릅니다.

반응형

'아침편지' 카테고리의 다른 글

지옥 같은 고통은 왜 올까  (0) 2025.10.20
바보  (0) 2025.10.20
저체온 여성이 늘고 있다  (0) 2025.10.16
길만큼 좋은 스승은 없다  (0) 2025.10.15
집단지성이 필요한 이유  (0) 2025.10.14
반응형

Plotly를 사용한 게이지 차트 (Gauge Chart) 생성 예제 (Python Code)

 

Plotly Tutorial - 파이썬 시각화의 끝판왕 마스터하기 https://wikidocs.net/book/8909

 

https://plotly.com/python-api-reference/plotly.graph_objects.html

 

plotly.graph_objects: low-level interface to figures, traces and layout — 6.3.0 documentation

plotly.graph_objects: low-level interface to figures, traces and layout plotly.graph_objects contains the building blocks of plotly Figure: traces (Scatter, Bar, …) and Layout >>> import plotly.graph_objects as go Figure Figure([data, layout, frames, 

plotly.com

Plotly는 인터렉티브한 시각화가 가능한 파이썬 그래픽 라이브러리 입니다. 기본적인 시각화부터 통계, 재무, 지리 과학 및 3-dimensional 을 포함한 40개 이상의 차트 타입을 제공하는 오픈소스 입니다. 기본적으로 쥬피터 노트북에 시각화가 가능하며 인터렉티브한 dashboards 위해 Dash 또는 Chart Studio와 같은 라이브러리와 통합 및 확장이 가능합니다.

 

특징

  1. Interactive 한 시각화 가능하여 사용자가 시각화된 그래프를 쉽게 줌인, 줌아웃 및 툴팁을 활용한 데이터확인이 가능합니다. (Matplotlib/Seaborn 과의 가장 큰 차이점)
  2. Dash, 및 chart Studio 와같은 visualisation tools 연동으로 Web 및 application 통해 확인이 가능합니다.
  3. matplotlib 대비 코드가 훨씬 간편합니다.(이 책을 통해 익숙해진다면..)
  4. Python 뿐만 아니라 R, Julia, MATLAB 등과 같은 다른 프로그래밍 언어를 스크립트를 사용하여 이용이 가능합니다.
  5. Plotly는 기본적으로 JSON(JavaScript Object Notation) 형태를 주고받는 구조로 되어있습니다. 하지만 걱정 하실필요 없습니다. 본 책에서는 복잡한 JSON 형태가 아닌 직관적인 객체를 사용하는 방법으로 진행할 예정입니다.
  6. Matplotlib 차트를 Plotly 차트로 변화나는 기능이 지원됩니다.
  7. Pandas와의 호환 기능이 추가되어 판다스 plotting 백엔드에 Plotly를 설정하면 Padas 데이터프레임에서 바로 Plotly 로 시각화가 가능합니다.
  8. 기본적인 색감이 매우 이쁩니다.(개인적인 취향)
  9. 라이센스가 무료 입니다.

 

 

 

"""
    pip install plotly
    Plotly를 사용한 게이지 차트 (Gauge Chart) 생성 예제 (Python Code)
"""

import plotly.graph_objects as go
import plotly.offline as pyo

# --- 게이지 차트 데이터 설정 ---
value = 75  # 현재 값 (예: 판매 목표 달성률 75%)
max_value = 100 # 최대 값
title_text = "판매 목표 달성률"
unit_text = "%"

# --- Plotly Indicator 객체 생성 ---
fig = go.Figure(go.Indicator(
    mode = "gauge+number+delta", # 게이지, 숫자, 델타(변화량)를 표시
    value = value,
    number = {'suffix': unit_text}, # 숫자 뒤에 단위 표시
    domain = {'x': [0, 1], 'y': [0, 1]},
    title = {'text': title_text, 'font': {'size': 24}},
    
    # --- 게이지 설정 ---
    gauge = {
        'shape': "angular", # 게이지 모양 (angular: 원형, bullet: 수평 막대)
        'axis': {'range': [None, max_value], 'tickwidth': 1, 'tickcolor': "darkblue"},
        'bar': {'color': "darkblue"}, # 현재 값 막대의 색상
        'bgcolor': "white",
        'borderwidth': 2,
        'bordercolor': "gray",
        
        # --- 구간별 색상 설정 (Thresholds) ---
        'steps': [
            {'range': [0, 50], 'color': "lightgray"},   # 0% ~ 50%
            {'range': [50, 85], 'color': "lightblue"},  # 50% ~ 85%
            {'range': [85, 100], 'color': "yellowgreen"} # 85% ~ 100% (목표 근접/달성)
        ],
        
        # --- 목표선 설정 (Threshold) ---
        'threshold': {
            'line': {'color': "red", 'width': 4},
            'thickness': 0.75, # 목표선의 두께
            'value': 90 # 목표 값 (예: 90%)
        }
    }
))

# --- 레이아웃 설정 ---
fig.update_layout(
    paper_bgcolor = "white", # 배경 색상
    font = {'color': "black", 'family': "Arial"},
    margin = dict(l=20, r=20, t=50, b=20) # 여백 설정
)

# --- 차트 출력 (브라우저에서 확인) ---
# pyo.plot(fig, filename='gauge_chart.html')

# --- (선택 사항) Notebook 환경에서 출력 ---
fig.show()
반응형
반응형

체온이 섭씨 0.5도 내려가면
면역력은 35%나 낮아진다고 한다.
체온이 저하되면서 효소의 활성도가 약해지기
때문이다. 최근 연구에 따르면 암세포는 체온이
섭씨 35도일 때 가장 활성화된다고 한다. 평균 체온
섭씨 35도인 저체온의 사람들이 젊은 여성을 중심으로
늘어나고 있다. 체온이 낮으면 병에 걸리기 쉬울 뿐
아니라 노화가 진행되는 속도도 빨라진다는
사실을 명심해야 한다.


- 신야 히로미의《불로장생 탑 시크릿 Top secret》중에서 -


* 체온은 우리 몸의 나침판입니다.
평균 체온인 36.5도에서 1도만 높아도 코로나 검사를
받아야 하고, 1도만 낮아도 암 검사를 받아야 합니다.
단지 여성만의 문제는 아닙니다. 몸이 차가운 사람들이
많아지고 있습니다. 첫 증상은 손발이 차가워지는 것이고,
다음은 배, 특히 아랫배와 하초 부위가 얼음장처럼 차가워져
소화불량, 변비 등 만병의 원인이 되고 있습니다.
정상 체온을 유지하는 방법은 간단합니다.
적당한 운동, 특히 유산소 운동을
꾸준히 하는 것입니다.

반응형

'아침편지' 카테고리의 다른 글

바보  (0) 2025.10.20
'거대한 가속'의 시대  (0) 2025.10.17
길만큼 좋은 스승은 없다  (0) 2025.10.15
집단지성이 필요한 이유  (0) 2025.10.14
서점 문화운동  (0) 2025.10.13
반응형

22 HTML Input Types That Will Make Your Forms 10x Better

 

https://pixicstudio.medium.com/22-html-input-types-that-will-make-your-forms-10x-better-4fcf806e7a58

 

22 HTML Input Types That Will Make Your Forms 10x Better

The HTML <input> element is honestly one of the most versatile tags in web development. It's been around forever, but there are so many…

pixicstudio.medium.com

 

 

https://codepen.io/web-strategist/pen/vELyGyb

 

22 HTML Forms Input Types

...

codepen.io

See the Pen 22 HTML Forms Input Types by Usman (@web-strategist) on CodePen.

1. type=”text”

This is the bread and butter of input fields.

It’s the default input type for single-line text.

<input type="text" name="username" placeholder="Enter your username">

Perfect for names, usernames, or any short text.

Nothing fancy, but you’ll use it everywhere.

2. type=”password”

Ever needed to hide what users are typing?

type="password" masks the input automatically.

<input type="password" name="password" placeholder="Enter password">

The text shows as dots or asterisks.

Security 101 for login forms.

3. type=”email”

Email validation built right in.

It checks for the @ symbol and proper email format on mobile keyboards.

<input type="email" name="email" placeholder="your@email.com">

Mobile browsers automatically show the @ key.

Plus, you get instant validation on submit.

Cleaner. Smarter. Less JS needed.

4. type=”number”

Number inputs give you numeric keyboards on mobile and built-in validation.

<input type="number" name="quantity" min="1" max="100" step="1">

You can set:

  • min and max for ranges
  • step for increment values

The browser handles all the validation for you.

5. type=”tel”

Telephone inputs bring up the number pad on mobile devices.

<input type="tel" name="phone" placeholder="(123) 456-7890">

It doesn’t validate format automatically, but it makes typing phone numbers way easier on mobile. Perfect for better user experience.

6. type=”url”

URL inputs validate web addresses and show optimized keyboards.

<input type="url" name="website" placeholder="https://example.com">

Mobile keyboards show .com and / buttons. The browser checks for valid URL format automatically.

7. type=”search”

Search inputs look like search fields with a clear button.

<input type="search" name="query" placeholder="Search...">

Some browsers add an X button to clear the input. It’s semantically correct and improves accessibility.

8. type=”date”

Date pickers, no JavaScript needed.

<input type="date" name="birthday" min="1900-01-01" max="2025-12-31">

The browser shows a native date picker. You can set min and max to restrict date ranges. So much cleaner than custom date picker libraries.

9. type=”time”

Time inputs give you native time pickers.

<input type="time" name="appointment" min="09:00" max="18:00">

Perfect for scheduling forms. No more struggling with AM/PM dropdowns.

10. type=”datetime-local”

This one’s powerful: date AND time in one field.

<input type="datetime-local" name="meeting">

It combines date and time selection. Great for event registration or booking systems.

11. type=”month”

Month pickers for month/year selection.

<input type="month" name="expiry" min="2025-01">

Perfect for credit card expiry dates or monthly reports. The browser handles the calendar interface.

12. type=”week”

Week pickers let users select a specific week of the year.

<input type="week" name="week">

It’s niche, but super useful for scheduling or timesheet applications.

13. type=”color”

Color pickers built right into HTML.

<input type="color" name="theme-color" value="#4f46e5">

The browser shows a native color picker. No more importing color picker libraries for simple use cases.

14. type=”range”

Sliders for selecting values within a range.

<input type="range" name="volume" min="0" max="100" step="5" value="50">

Visual, intuitive, and perfect for settings like volume or brightness. You can customize the appearance with CSS too.

15. type=”file”

File uploads made simple.

<input type="file" name="document" accept=".pdf,.doc,.docx">

You can restrict file types with accept. Add multiple to allow multiple file selection:

<input type="file" name="photos" accept="image/*" multiple>

Essential for any upload functionality.

16. type=”checkbox”

Checkboxes for yes/no or multiple selections.

<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>

You can have multiple checkboxes with the same name for selecting multiple options. Simple, but absolutely essential.

17. type=”radio”

Radio buttons for single selections from multiple options.

<input type="radio" name="size" value="small" id="small">
<label for="small">Small</label>
<input type="radio" name="size" value="medium" id="medium">
<label for="medium">Medium</label><input type="radio" name="size" value="large" id="large">
<label for="large">Large</label>

Same name attribute groups them together.

Only one can be selected at a time.

18. type=”hidden”

Hidden inputs store data without displaying it.

<input type="hidden" name="user_id" value="12345">

Perfect for passing IDs, tokens, or other data that users don’t need to see. They’re invisible but still submitted with the form.

19. type=”submit”

Submit buttons trigger form submission.

<input type="submit" value="Sign Up">

It’s the classic way to submit forms. Though <button type="submit"> is more flexible these days.

20. type=”reset”

Reset buttons clear all form fields to their default values.

<input type="reset" value="Clear Form">

Use sparingly users rarely expect or want this.

But it’s there when you need it.

21. type=”button”

Generic buttons that don’t submit forms.

<input type="button" value="Click Me" onclick="doSomething()">

Perfect for JavaScript interactions without form submission.

Modern code usually uses <button> instead, but this works too.

22. type=”image”

Image buttons that act as submit buttons.

<input type="image" src="submit-icon.png" alt="Submit">

It submits the form AND sends the x,y coordinates of where you clicked.

Niche, but useful for image maps or creative submit buttons.

Bonus Attributes You Should Know

Here are some powerful attributes that work across multiple input types:

required: Makes the field mandatory

<input type="email" name="email" required>

placeholder: Shows hint text

<input type="text" placeholder="Enter your name">

pattern: Custom validation with regex

<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

minlength and maxlength: Character limits

<input type="text" minlength="3" maxlength="50">

readonly: Display only, no editing

<input type="text" value="Cannot edit this" readonly>

disabled: Grays out and prevents interaction

<input type="text" value="Disabled" disabled>

autocomplete: Controls browser autofill

<input type="email" autocomplete="email">

autofocus: Focuses field on page load

<input type="text" autofocus>

list: Connects to datalist for autocomplete suggestions

<input type="text" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Modern Input Attributes (Bonus Round)

capture: Accesses camera/microphone on mobile

<input type="file" accept="image/*" capture="environment">

inputmode: Optimizes mobile keyboards

<input type="text" inputmode="numeric">

multiple: Allows multiple values (for email, file)

<input type="file" multiple>

accept: Filters file types

<input type="file" accept="image/png, image/jpeg">

The Power of Native HTML Is Here

That’s it, every HTML input type and the most important attributes that are making building forms actually fun again.

Some of them you’ll use every single day, and others are perfect for specific use cases.

Either way, they’re worth knowing inside and out, because they eliminate the need for heavy JavaScript libraries and give you better mobile experiences out of the box.

The browser does the heavy lifting. You just write better HTML.

I’ve covered all 22 input types from the basic text and password to the modern ones like datetime-local, color, and range, plus essential attributes like required, pattern, autocomplete, and mobile-specific ones like capture and inputmode.

반응형
반응형

길만큼 좋은 스승은 없다.
길은 종합선물세트다. 책과 선생님과
건강이라는 선물을 무상으로 안긴다. 길이라는
책과, 길이라는 선생님과, 길이라는 건강을 깨닫게 되면
길의 무한성에 성큼 다가선 것이다. 모든 교육은
경제적인 문제가 따르기 마련이다. 그러나 길은
어떤 대가도 바라지 않는다. 참 교육자를
만나기 쉽지 않은 현실이지만 길은
언제나 예외다. 길의 위대성이
빛을 발하는 순간이다.


- 돌솔 이응석의 《자유, 너는 자유다》 중에서 -


* 같은 길을 걸어도
어제의 길이 다르고 오늘의 길이 다릅니다.
기분 따라 마음 따라 보이는 것도 달라집니다.
길이 막혔다, 길을 잃었다 싶은데 도리어 새로운
길을 만나기도 합니다. 인생을 길에도 비유합니다.
나그네길, 고생길, 순례길, 도(道)의 길. 그 길 위에
책이 있고, 스승도 만납니다. 덤으로 건강도
얻습니다. 길을 걷는 것만으로도
사람은 새롭게 태어납니다.

반응형

'아침편지' 카테고리의 다른 글

'거대한 가속'의 시대  (0) 2025.10.17
저체온 여성이 늘고 있다  (0) 2025.10.16
집단지성이 필요한 이유  (0) 2025.10.14
서점 문화운동  (0) 2025.10.13
지혜  (0) 2025.10.13

+ Recent posts