diff --git a/apps/timo-web/api/todo/todo-schema.ts b/apps/timo-web/api/todo/todo-schema.ts
index f1516663..ec98b4e4 100644
--- a/apps/timo-web/api/todo/todo-schema.ts
+++ b/apps/timo-web/api/todo/todo-schema.ts
@@ -42,7 +42,7 @@ export const createTodoRequestSchema = z
     repeatType: todoRepeatTypeSchema,
     repeatWeekdays: z.array(todoRepeatWeekdaySchema).nullable(),
     repeatDayOfMonth: z.number().int().min(1).max(31).nullable(),
-    memo: z.string().nullable(),
+    memo: z.string().max(300).nullable(),
   })
   .superRefine((value, ctx) => {
     if (
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index 054b37a3..9d6120a9 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -84,11 +84,7 @@ export const HomeTodoCard = ({
   const titleRow = (
     <div className="flex w-full items-center justify-between gap-2">
       <div className="flex min-w-0 flex-1 items-center gap-1">
-        <Checkbox
-          checked={isCompleted}
-          onChange={onToggleCompleted}
-          disabled={isCompleted}
-        />
+        <Checkbox checked={isCompleted} onChange={onToggleCompleted} />
         <p
           className={cn(
             "typo-body-sb-12 min-w-0 flex-1 truncate",
@@ -133,7 +129,6 @@ export const HomeTodoCard = ({
             <Checkbox
               checked={isSubtaskCompleted}
               onChange={(checked) => onToggleSubtaskCompleted?.(checked)}
-              disabled={isCompleted}
             />
             <p className="typo-body-r-12 text-timo-gray-700 min-w-0 flex-1 truncate">
               {subtaskTitle}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
index b12a565a..5f80837c 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
@@ -1,3 +1,11 @@
+const MEMO_MAX_LENGTH = 300;
+
+const resizeTextarea = (element: HTMLTextAreaElement | null) => {
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+};
+
 export interface CreateTodoMemoFieldProps {
   value: string;
   placeholder: string;
@@ -12,10 +20,13 @@ export const CreateTodoMemoField = ({
   return (
     <textarea
       value={value}
+      ref={resizeTextarea}
       onChange={(event) => onChange(event.target.value)}
+      onInput={(event) => resizeTextarea(event.currentTarget)}
       placeholder={placeholder}
+      maxLength={MEMO_MAX_LENGTH}
       rows={1}
-      className="typo-body-r-12 text-timo-gray-800 w-full resize-none outline-none"
+      className="typo-body-r-12 text-timo-gray-800 max-h-[40vh] w-full resize-none overflow-y-auto wrap-break-word outline-none"
     />
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
index 8259c706..e69118e7 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
@@ -1,42 +1,77 @@
 import { Checkbox } from "@repo/timo-design-system/ui";
 
-import type { CreateTodoRequest } from "@/api/todo/todo-schema";
-import type { UseFormRegister } from "react-hook-form";
+import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
+import type { KeyboardEvent } from "react";
+
+const resizeTextarea = (element: HTMLTextAreaElement | null) => {
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+};
 
 export interface CreateTodoTaskFieldsProps {
-  register: UseFormRegister<CreateTodoRequest>;
+  titleValue: string;
   titlePlaceholder: string;
-  subtaskInput: string;
+  onTitleChange: (value: string) => void;
+  subtaskInputs: SubtaskInputEntry[];
   subtaskPlaceholder: string;
-  onSubtaskInputChange: (value: string) => void;
+  registerSubtaskInputRef: (
+    index: number,
+  ) => (element: HTMLTextAreaElement | null) => void;
+  onSubtaskInputChange: (index: number, value: string) => void;
+  onSubtaskInputKeyDown: (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => void;
 }
 
 export const CreateTodoTaskFields = ({
-  register,
+  titleValue,
   titlePlaceholder,
-  subtaskInput,
+  onTitleChange,
+  subtaskInputs,
   subtaskPlaceholder,
+  registerSubtaskInputRef,
   onSubtaskInputChange,
+  onSubtaskInputKeyDown,
 }: CreateTodoTaskFieldsProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-1.5">
-      <div className="flex w-full items-center gap-2">
-        <Checkbox checked={false} onChange={() => {}} disabled />
-        <input
-          {...register("title")}
+      <div className="flex w-full items-center justify-center gap-2">
+        <Checkbox checked={false} onChange={() => {}} />
+        <textarea
+          value={titleValue}
+          ref={resizeTextarea}
+          onChange={(event) => {
+            onTitleChange(event.target.value);
+            resizeTextarea(event.currentTarget);
+          }}
           placeholder={titlePlaceholder}
-          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none"
-        />
-      </div>
-      <div className="flex w-full items-center gap-2">
-        <Checkbox checked={false} onChange={() => {}} disabled />
-        <input
-          value={subtaskInput}
-          onChange={(event) => onSubtaskInputChange(event.target.value)}
-          placeholder={subtaskPlaceholder}
-          className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 outline-none"
+          rows={1}
+          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
         />
       </div>
+
+      {subtaskInputs.map((entry, index) => (
+        <div
+          key={entry.id}
+          className="flex w-full items-center justify-center gap-2"
+        >
+          <Checkbox checked={false} onChange={() => {}} />
+          <textarea
+            value={entry.value}
+            ref={registerSubtaskInputRef(index)}
+            onChange={(event) => {
+              onSubtaskInputChange(index, event.target.value);
+              resizeTextarea(event.currentTarget);
+            }}
+            onKeyDown={(event) => onSubtaskInputKeyDown(index, event)}
+            placeholder={subtaskPlaceholder}
+            rows={1}
+            className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+          />
+        </div>
+      ))}
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
index c4bf70ff..9489bcb3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { DeleteIcon } from "@repo/timo-design-system/icons";
 import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { useController, useForm, useWatch } from "react-hook-form";
+import { useController, useForm } from "react-hook-form";
 
 import type { CreateTodoRequest } from "@/api/todo/todo-schema";
 import type { PriorityLevel } from "@repo/timo-design-system/ui";
@@ -16,11 +15,13 @@ import { CreateTodoMemoField } from "@/app/[locale]/(main)/(with-time-sidebar)/h
 import { CreateTodoTaskFields } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields";
 import { useIconField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field";
 import { useRepeatField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field";
+import { useSubtaskField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field";
 import {
   DEFAULT_TAG,
   useTagField,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field";
 import { useTimeField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field";
+import { useTitleField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field";
 import { formatDateToIsoDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
@@ -63,15 +64,11 @@ export const CreateTodoModalContent = ({
   const tCommon = useTranslations("Common");
   const tToast = useTranslations("Toast");
 
-  const [subtaskInput, setSubtaskInput] = useState("");
-
-  const { register, control, handleSubmit, setValue, reset } =
-    useForm<CreateTodoRequest>({
-      resolver: zodResolver(createTodoRequestSchema),
-      defaultValues: createDefaultValues(defaultDate),
-    });
+  const { control, handleSubmit, reset } = useForm<CreateTodoRequest>({
+    resolver: zodResolver(createTodoRequestSchema),
+    defaultValues: createDefaultValues(defaultDate),
+  });
 
-  const title = useWatch({ control, name: "title" });
   const { field: dateField } = useController({ name: "date", control });
   const { field: memoField } = useController({ name: "memo", control });
   const { field: priorityField } = useController({
@@ -83,25 +80,20 @@ export const CreateTodoModalContent = ({
   const tagField = useTagField({ control });
   const timeField = useTimeField({ control });
   const repeatField = useRepeatField({ control });
+  const subtaskField = useSubtaskField({ control });
+  const titleField = useTitleField({ control });
 
   const dateValue = dateField.value
     ? new Date(`${dateField.value}T00:00:00`)
     : undefined;
 
-  const handleSubtaskInputChange = (value: string) => {
-    setSubtaskInput(value);
-    setValue("subtasks", value.trim() ? [value] : [], {
-      shouldValidate: true,
-    });
-  };
-
   const handleFormSubmit = (data: CreateTodoRequest) => {
     const tag = tagField.selectedTagOption ?? DEFAULT_TAG;
 
     onSubmit(data, { id: data.tagId ?? tag.id, name: tag.name });
 
     reset(createDefaultValues(defaultDate));
-    setSubtaskInput("");
+    subtaskField.reset();
     timeField.resetTime();
     onClose();
   };
@@ -142,11 +134,14 @@ export const CreateTodoModalContent = ({
             />
 
             <CreateTodoTaskFields
-              register={register}
+              titleValue={titleField.title}
               titlePlaceholder={t("createModal.titlePlaceholder")}
-              subtaskInput={subtaskInput}
+              onTitleChange={titleField.handleTitleChange}
+              subtaskInputs={subtaskField.subtaskInputs}
               subtaskPlaceholder={t("createModal.subtaskPlaceholder")}
-              onSubtaskInputChange={handleSubtaskInputChange}
+              registerSubtaskInputRef={subtaskField.registerInputRef}
+              onSubtaskInputChange={subtaskField.handleInputChange}
+              onSubtaskInputKeyDown={subtaskField.handleInputKeyDown}
             />
           </div>
 
@@ -214,7 +209,7 @@ export const CreateTodoModalContent = ({
 
           <CreateButton
             label={t("createModal.create")}
-            disabled={!title.trim()}
+            disabled={!titleField.title.trim()}
             onClick={handleSubmit(handleFormSubmit)}
           />
         </div>
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
new file mode 100644
index 00000000..c9a6c56a
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from "react";
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
+import type { KeyboardEvent } from "react";
+import type { Control } from "react-hook-form";
+
+import {
+  addSubtaskInputOnEnter,
+  removeSubtaskInputOnBackspace,
+} from "@/utils/todo/subtask-input-list";
+
+const MAX_SUBTASK_COUNT = 10;
+
+export interface UseSubtaskFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
+  const { field } = useController({ name: "subtasks", control });
+  const nextEntryId = useRef(0);
+  const createEntry = (value = ""): SubtaskInputEntry => ({
+    id: nextEntryId.current++,
+    value,
+  });
+
+  const [subtaskInputs, setSubtaskInputs] = useState<SubtaskInputEntry[]>(
+    () => [createEntry()],
+  );
+  const inputRefs = useRef<Array<HTMLTextAreaElement | null>>([]);
+  const pendingFocusIndex = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (pendingFocusIndex.current === null) return;
+
+    const index = pendingFocusIndex.current;
+    pendingFocusIndex.current = null;
+
+    const element = inputRefs.current[index];
+    if (!element) return;
+
+    element.focus();
+    const caretPosition = element.value.length;
+    element.setSelectionRange(caretPosition, caretPosition);
+  }, [subtaskInputs.length]);
+
+  const syncFormValue = (entries: SubtaskInputEntry[]) => {
+    field.onChange(entries.map((entry) => entry.value.trim()).filter(Boolean));
+  };
+
+  const registerInputRef =
+    (index: number) => (element: HTMLTextAreaElement | null) => {
+      inputRefs.current[index] = element;
+    };
+
+  const handleInputChange = (index: number, value: string) => {
+    setSubtaskInputs((prev) => {
+      const next = prev.map((entry, i) =>
+        i === index ? { ...entry, value } : entry,
+      );
+      syncFormValue(next);
+      return next;
+    });
+  };
+
+  const handleInputKeyDown = (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+
+      setSubtaskInputs((prev) => {
+        const { entries, focusIndex } = addSubtaskInputOnEnter(
+          prev,
+          index,
+          createEntry,
+          MAX_SUBTASK_COUNT,
+        );
+
+        if (focusIndex !== null) pendingFocusIndex.current = focusIndex;
+        return entries;
+      });
+      return;
+    }
+
+    if (event.key === "Backspace") {
+      const { entries, focusIndex } = removeSubtaskInputOnBackspace(
+        subtaskInputs,
+        index,
+      );
+
+      if (focusIndex !== null) {
+        event.preventDefault();
+        pendingFocusIndex.current = focusIndex;
+        setSubtaskInputs(entries);
+      }
+    }
+  };
+
+  const reset = () => {
+    setSubtaskInputs([createEntry()]);
+    inputRefs.current = [];
+  };
+
+  return {
+    subtaskInputs,
+    registerInputRef,
+    handleInputChange,
+    handleInputKeyDown,
+    reset,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
new file mode 100644
index 00000000..31efcae7
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
@@ -0,0 +1,26 @@
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { Control } from "react-hook-form";
+
+import {
+  TITLE_MAX_WEIGHTED_LENGTH,
+  truncateToWeightedLength,
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length";
+
+export interface UseTitleFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useTitleField = ({ control }: UseTitleFieldParams) => {
+  const { field } = useController({ name: "title", control });
+
+  const handleTitleChange = (value: string) => {
+    field.onChange(truncateToWeightedLength(value, TITLE_MAX_WEIGHTED_LENGTH));
+  };
+
+  return {
+    title: field.value,
+    handleTitleChange,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts
new file mode 100644
index 00000000..c6139bad
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts
@@ -0,0 +1,55 @@
+const HANGUL_CHAR_WEIGHT = 1.5;
+const DEFAULT_CHAR_WEIGHT = 1;
+
+/**
+ * 투두명(title) 입력 제한에 사용하는 최대 가중 길이.
+ * 한글 문자 가중치(1.5)를 적용하면 한국어 20자(20 * 1.5 = 30) 또는
+ * 영어 30자(30 * 1 = 30)까지 입력 가능한 것과 동일한 값이다.
+ */
+export const TITLE_MAX_WEIGHTED_LENGTH = 30;
+
+const HANGUL_RANGES: Array<[number, number]> = [
+  [0x1100, 0x11ff], // Hangul Jamo
+  [0x3130, 0x318f], // Hangul Compatibility Jamo
+  [0xac00, 0xd7a3], // Hangul Syllables
+];
+
+const isHangulChar = (char: string): boolean => {
+  const code = char.codePointAt(0) ?? 0;
+  return HANGUL_RANGES.some(([start, end]) => code >= start && code <= end);
+};
+
+const getCharWeight = (char: string): number =>
+  isHangulChar(char) ? HANGUL_CHAR_WEIGHT : DEFAULT_CHAR_WEIGHT;
+
+/**
+ * 문자열의 가중 길이를 계산한다. 한글 문자는 1.5, 그 외 문자는 1로 계산한다.
+ * @param value - 길이를 계산할 문자열
+ * @returns 가중치가 적용된 길이
+ */
+export const getWeightedLength = (value: string): number =>
+  Array.from(value).reduce((total, char) => total + getCharWeight(char), 0);
+
+/**
+ * 문자열을 주어진 가중 길이 한도에 맞춰 잘라낸다. 한글 문자는 1.5, 그 외 문자는
+ * 1의 가중치로 계산하며, 한도를 초과하는 지점부터는 잘려나간다.
+ * @param value - 잘라낼 문자열
+ * @param maxWeightedLength - 허용되는 최대 가중 길이
+ * @returns 가중 길이 한도를 넘지 않는 범위로 잘라낸 문자열
+ */
+export const truncateToWeightedLength = (
+  value: string,
+  maxWeightedLength: number,
+): string => {
+  let total = 0;
+  let result = "";
+
+  for (const char of Array.from(value)) {
+    const next = total + getCharWeight(char);
+    if (next > maxWeightedLength) break;
+    total = next;
+    result += char;
+  }
+
+  return result;
+};
diff --git a/apps/timo-web/utils/todo/subtask-input-list.ts b/apps/timo-web/utils/todo/subtask-input-list.ts
new file mode 100644
index 00000000..12602596
--- /dev/null
+++ b/apps/timo-web/utils/todo/subtask-input-list.ts
@@ -0,0 +1,62 @@
+export interface SubtaskInputEntry {
+  id: number;
+  value: string;
+}
+
+export interface SubtaskInputListChange {
+  entries: SubtaskInputEntry[];
+  focusIndex: number | null;
+}
+
+/**
+ * Enter 입력 시 하위 태스크 입력 필드를 추가한다. 마지막 필드에서 값이 있고
+ * 최대 개수를 넘지 않을 때만 새 필드를 추가하며, 그 외에는 원본 목록을 그대로 반환한다.
+ * @param entries - 현재 하위 태스크 입력 목록
+ * @param index - Enter가 입력된 필드의 인덱스
+ * @param createEntry - 새로 추가할 입력 엔트리를 생성하는 함수
+ * @param maxCount - 허용되는 최대 입력 필드 개수
+ * @returns 갱신된 입력 목록과 포커스를 이동할 인덱스(변경 없으면 null)
+ */
+export const addSubtaskInputOnEnter = (
+  entries: SubtaskInputEntry[],
+  index: number,
+  createEntry: () => SubtaskInputEntry,
+  maxCount: number,
+): SubtaskInputListChange => {
+  const isLastField = index === entries.length - 1;
+  const hasValue = Boolean(entries[index]?.value.trim());
+  const canAddMore = entries.length < maxCount;
+
+  if (!isLastField || !hasValue || !canAddMore) {
+    return { entries, focusIndex: null };
+  }
+
+  return {
+    entries: [...entries, createEntry()],
+    focusIndex: entries.length,
+  };
+};
+
+/**
+ * Backspace 입력 시 빈 하위 태스크 입력 필드를 이전 필드로 병합(삭제)한다.
+ * 필드가 비어 있고 이전 필드가 존재할 때만 제거하며, 그 외에는 원본 목록을 그대로 반환한다.
+ * @param entries - 현재 하위 태스크 입력 목록
+ * @param index - Backspace가 입력된 필드의 인덱스
+ * @returns 갱신된 입력 목록과 포커스를 이동할 인덱스(변경 없으면 null)
+ */
+export const removeSubtaskInputOnBackspace = (
+  entries: SubtaskInputEntry[],
+  index: number,
+): SubtaskInputListChange => {
+  const isFieldEmpty = entries[index]?.value === "";
+  const canMergeIntoPrevious = index > 0;
+
+  if (!isFieldEmpty || !canMergeIntoPrevious) {
+    return { entries, focusIndex: null };
+  }
+
+  return {
+    entries: entries.filter((_, i) => i !== index),
+    focusIndex: index - 1,
+  };
+};