기능 추가
프로젝트가 잘 작동하고 있다면, 이제 편의 기능을 추가해서 더 좋은 경험을 만들어 봅시다. 하나씩 천천히 추가하는 것이 중요합니다.
다크 모드
화면이 너무 밝아서 눈이 피로한 적 있으신가요? 다크 모드는 배경을 어둡게 바꿔주는 기능입니다.
"다크 모드 토글 버튼을 추가해줘. 버튼을 누르면 어두운 테마로 바뀌고, 다시 누르면 밝은 테마로 돌아오게 해줘."
AI가 해/달 아이콘 버튼과 함께 전체 색상을 전환하는 기능을 만들어 줍니다.
로딩 표시
버튼을 눌렀는데 아무 반응이 없으면 "고장 났나?" 하고 불안해집니다. 로딩 표시를 넣으면 "지금 처리 중이야"라고 알려줄 수 있습니다.
"데이터를 불러오는 동안 화면 가운데에 빙글빙글 도는 로딩 아이콘을 보여줘."
또는 버튼 자체에 표시할 수도 있습니다:
"생성 버튼을 누르면 버튼 텍스트가 '처리 중...'으로 바뀌고, 완료되면 원래대로 돌아오게 해줘."
스크롤 애니메이션
스크롤을 내릴 때 내용이 서서히 나타나는 효과를 넣으면 화면이 훨씬 세련되어 보입니다.
"스크롤을 내리면 각 섹션이 아래에서 위로 서서히 나타나는 애니메이션을 넣어줘."
작은 효과 하나로 사이트의 느낌이 확 달라집니다.
검색 기능
내용이 많아지면 검색 기능이 유용합니다.
"페이지 상단에 검색창을 추가해줘. 검색어를 입력하면 해당 내용만 필터링되어 보이게 해줘."
예를 들어 메뉴가 많은 카페 사이트라면, "아메리카노"를 검색하면 아메리카노 관련 메뉴만 보이게 할 수 있습니다.
기능 추가 시 주의할 점
| 좋은 습관 | 나쁜 습관 |
|---|---|
| 기능 하나를 추가하고, 확인하고, 다음으로 | 한꺼번에 5개 기능을 추가 |
| 추가 전에 커밋(세이브) | 세이브 없이 계속 수정 |
| 잘 안 되면 되돌리기 | 에러를 무시하고 다음 기능 추가 |
요리할 때도 재료를 하나씩 넣으면서 간을 보잖아요? 기능 추가도 마찬가지입니다. 하나 넣고, 맛보고, 괜찮으면 다음 것을 넣으세요.
추가하면 좋은 기능 아이디어
지금 당장 다 할 필요는 없습니다. 나중에 필요할 때 하나씩 시도해 보세요:
| 기능 | AI에게 이렇게 말하기 |
|---|---|
| 맨 위로 가기 버튼 | "스크롤을 내리면 오른쪽 아래에 '맨 위로' 버튼이 나타나게 해줘" |
| 공유 버튼 | "카카오톡이나 링크로 공유할 수 있는 버튼을 추가해줘" |
| 알림 메시지 | "저장이 완료되면 초록색 알림이 잠깐 나타났다 사라지게 해줘" |
| 즐겨찾기 | "항목에 하트 버튼을 넣어서 즐겨찾기할 수 있게 해줘" |
이 절의 요약
- 다크 모드, 로딩 표시, 애니메이션, 검색 등 편의 기능을 추가할 수 있습니다
- AI에게 원하는 기능을 설명하면 코드를 만들어 줍니다
- 기능은 하나씩 추가하고, 확인한 후 다음으로 넘어갑니다
- 추가 전에 반드시 커밋(세이브)해 두세요