1. 어떤 상황에서 AI를 활용했나요?

📌 문제 상황

* 프로젝트를 시작하게 된 계기
대학교에서 업로드하는 공지사항을 확인해야 했습니다. 이때 성균관대학교, 단과대학교, 학과에서 운영하는 공지사항 사이트가 각각 달랐고, 세 가지를 매번 체크하는 것이 번거로웠습니다. 따라서 세 사이트에서 올라오는 공지사항들을 하나의 사이트에서 같이 확인할 수 있으면 좋겠다고 느꼈습니다.
공지사항을 확인하는 동시에 해당 페이지로 연결시켜주는 허브 역할의 웹사이트를 만들고자 마음 먹게 되었습니다.

* 기존 방식의 불편함 또는 한계
성균관대학교 공지사항 페이지, 경영대학교 공지사항 페이지, 글로벌경영학과 공지사항 페이지를 오가면서 업데이트를 체크하기에는 무리가 있습니다. 즐겨찾기나 북마크 등을 통해 경로를 단축해 두어도, 이전에 내가 본 공지가 어느 사이트에서 올라왔던 것인지를 찾기가 어려웠습니다. 이러한 기존 방식의 번거로움을 해결하고자 하였습니다.

* 해결하고자 했던 문제
세 가지 사이트를 돌아다니지 않고 웹사이트 하나에서 모든 것을 확인할 수 있어야 합니다. 겉으로 보기만 멀쩡한 것이 아니라 실시간으로 학교 사이트들과 연동이 되어있어야 했으며 무엇보다도 구체적인 코딩 지식 없이 웹사이트를 만들 수 있어야 했습니다.


📌 AI가 필요한 이유

* 왜 AI를 활용하기로 했는지
저는 파이썬 기초 조금, 그리고 깃허브를 조금 쓸 줄 아는 경영대학 학생입니다. 심지어 대학교 1학년이라 고교 학습 과정 이외의 지식이 거의 전무합니다. 따라서 처음부터 코딩을 배우고, 자바 언어를 배우고, 백엔드나 프론트엔드 같은 어려워 보이는 기술들을 공부하는 것에는 무리가 있다고 느꼈습니다. 이때 다양한 AI 툴들을 활용해보아야겠다고 마음먹게 되었습니다.

* 기존 방법보다 AI가 적합하다고 판단한 이유
우선 저는 지식이 없었기 때문에 새롭게 처음부터 모든 것을 공부해야하는 상태였습니다. 지식이 전무한 만큼 최대한의 능률을 위해선 AI를 이용하는 것이 제격이라고 판단했습니다. 이전에 카드뉴스를 AI로 만들었던 경험을 통해, AI를 적극 활용하는 것이 얼마나 효율적인지를 체감한 바 있습니다. 어쩌면 웹사이트 역시 AI로 만들 수 있을 것이라는 생각을 하며 AI툴을 찾기 시작하였습니다.



---



2. 어떤 AI를 어떻게 활용했나요?

📌 활용한 AI
ChatGPT
- 프롬프트 작성 도움
- 웹사이트 제작 전반의 과정 이해
- 코딩 용어 설명

Readdy
- UI 디자인
- 웹사이트 생성


📌 활용 과정

① ChatGPT
웹사이트 제작 과정 이해
일반적인 과정과 필수 요구사항 확인
내가 구상한 웹사이트의 경우 어떤 툴과 언어를 이용해 웹사이트를 만드는 것이 좋은지 조사

↓

② ChatGPT
타 AI에게 입력할 프롬프트 작성
코드ver. 글ver. 나누어서 작성 후 여러 차례 디벨롭

↓

③ 적절한 AI 툴 찾기
웹사이트 생성 기능을 제공하는 다양한 AI 사이트들을 둘러보면서 조건에 맞는 AI 툴 탐색
무료이고 한도가 없는지, UI 디자인 기능이 일정 수준 이상인지, 실시간 연동 등의 실질적 기능을 제공하는지 등을 확인

↓

④ Readdy
레퍼런스 사이트나 애플리케이션을 정리하여 프롬프트에 포함
UI 디자인에 이용할 색상의 코드를 뽑아 작성
버전을 업그레이드 해가면서 UI 디자인 완성

↓

⑤ Supabase 생성 및 연결
Github 계정을 통해 Supabase 를 생성
새로운 Org를 만들어 이를 AI와 연결하여 구동

↓

⑥Readdy
AI가 스스로 프론트엔드 등 주요 업무를 수행해줌.
따라서 누락될만한 요소들을 체크리스트로 정리하여 이를 점검하게끔 입력함
사이트들 간의 실시간 연결, 누락된 공지사항 점검 등을 요구

↓

⑦Readdy
모바일 버전과 PC버전을 확인해가며 UI 디자인 최종 점검

↓

⑧Readdy
웹사이트 생성 및 배포


* 사이사이 모르는 용어들은 ChatGPT를 통해 학습



📌 AI에게 요청한 내용

* 디자인

참고 사이트(UI/UX) 벤치마킹
프로젝트 디자인 컨셉 설정
컬러 팔레트 및 색상 규칙 지정
상단 배너(성균관대학교 로고) 디자인
스크롤 애니메이션 적용
공지사항 카드/표 레이아웃 설계
공지 출처 라벨 디자인
공지 출처 바로가기 영역 디자인
전체 모바일 UI/UX 설계
공식 로고 원형 크롭 및 배치
헤더 폰트·자간·크기 조정
배경색 및 UI 컬러 변경
공지사항 영역 배경 및 아웃라인 색상 변경
라벨(대학·단과대·학과) 색상 지정
모바일 상단 로고 추가
안내 문구 크기 및 줄바꿈 개선
페이지네이션 UI 개선
하단 카드 레이아웃 개선
라벨(대학·단과대·학과) 크기 통일
공지사항 제목 잘림 현상 개선


* 기획

프로젝트 목적 및 서비스 기획
공지사항 통합 서비스 설계
세 홈페이지 공지 최신순 통합
공지 클릭 시 원본 페이지 이동
출처별 라벨링(대학·단과대·학과)
출처 홈페이지 바로가기 기능
실시간 공지 연동 요구
공지 15개 단위 페이지네이션
필터 기능(복수 선택)
페이지 번호 및 이동 방식 설계
누락 없는 공지 제공 정책


* 자료 조사

참고 웹사이트 조사 및 분석
성균관대학교 공지 홈페이지 조사
경영대학 공지 홈페이지 조사
글로벌경영학과 공지 홈페이지 조사
성균관대학교 공식 로고 및 이미지 조사


* 코드 보조

실시간 공지 연동(Supabase 활용)
세 사이트 공지 자동 수집 기능 요구
공지 최신순 정렬 로직
공지 원본 URL 연결 기능 명령
페이지네이션 구현 지시
필터 기능 구현 요구
새로고침 기능 추가 지시
모든 공지 누락 방지 로직


* 문서 작성

프로젝트 요구사항 명세 작성
디자인 요구사항 정리
기능 요구사항 정리
화면 구성 및 UI 가이드 작성


* 기타

AI가 이해하기 쉬운 프롬프트 작성
단계별 수정사항 피드백 및 반복 개선
UI 시안에 대한 지속적인 디테일 보완



---



3. 활용 결과 어떤 변화가 있었나요?

📌 결과

* 완성된 서비스
https://readdy.cc/preview/85d902cf-b952-4c69-8fdd-ac388e04f666/11457505/
모바일과 pc 모두에서 정상 운영

* 해결된 문제
한 번에 세 페이지의 공지사항 확인 가능
필터를 통해서 세 웹사이트 중 1~2개의 사이트를 선택적으로 확인 가능
새로고침을 통해 실시간으로 연동
원하는 사이트로 바로가기 기능

* 사용자 입장에서의 변화
편리성 강화
가독성 향상


📌 AI 활용 효과

* 시간 절약
처음 프로젝트를 구상했을 때 대략 1~2달을 소모하여 방학 기간 동안 완성할 계획이었습니다. 그러나 적절한 AI를 찾고 이후에 보조 AI를 이용하여 자료 조사부터 웹사이트 개설까지 하루 안에 이 모든 과정을 끝낼 수 있었습니다.

* 품질 향상
혼자 웹사이트를 만들었다면 이런 퀄리티를 낼 수 없었을 겁니다. 자바 언어를 학습하고 백엔드나 푸론트엔드 등의 필수적인 기능을 배우는 데에만 해도 엄청난 시간이 필요했을 테고 이 정도의 기능을 구현하지 못했을 게 분명합니다. 코딩을 해결한다해도 웹페이지 UI 디자인이나 모핑 같은 애니메이션을 배우고 적용하지 못해 사용자의 편리성이 매우 떨어졌을 것입니다. 하지만 AI를 통해 이런 점들을 극복할 수 있었고 전체적인 원리나 구조만 이해한 채로 결과물을 얻어낼 수 있었습니다.



---



4. 나만의 방식 또는 개선 포인트는 무엇인가요?

📌 차별화 요소

주 AI와 보조 AI를 함께 활용하는 것이 중요합니다. 주 AI만을 이용할 때보다 시간이 빠르게 단축되고 과정을 교차검증할 수 있어서 유용합니다. 특히 한 분야에서 채팅형 AI를 사용한다면 다른 곳에선 리서치용 AI를 사용하는 등 서로 다른 AI를 통해 신뢰도와 편리성을 잡을 수 있습니다.

필요한 준비물들을 챙겨둬야합니다. 말로만 부탁해도 AI가 직접 검색하여 채워주기는 하지만 매우 부정확할 수 있어 가장 중요한 요소들은 직접 서치해서 입력하는 것이 안전합니다. 예를 들어 성균관대 사이트라고 두루뭉술하게 표현만 해두면 메인 화면을 가져오거나 대학원생 공지사항을 긁어올 수 있습니다. 저는 로고와 세 사이트들은 직접 찾아 넣어 프롬프트를 입력했습니다.

레퍼런스를 찾는 것이 중요합니다. 머릿속에만 있는 기획을 적절한 프롬프트로 뽑기란 쉽지 않습니다. 특히나 경력이 있는 현직자에게 맡기는 것이 아닌 AI에게 요구하는 것이기 때문에 소통의 오류를 방지하고 내가 원하는 대로 결과물을 이끌어가기 위해서는 레퍼런스를 첨부하는 것이 가장 좋습니다. 웹사이트의 큰 틀과 UI 디자인은 노션과 전국민 AI 경진대회 홈페이지를 레퍼런스로 삼았습니다. 정확히 어떤 섹션을 어떤식으로 차용하고 해당 파트를 내 프로젝트에선 어떻게 변형하여 활용할 것인지를 구체적으로 작성해야합니다. 페이지 기능을 추가하고 각 페이지마다 몇개의 공지를 포함할지 등을 추가하여 완성했습니다. 또 필터 기능은 노션의 기본 기능인 필터 기능을 구현하는 대신 복수 선택이 가능하도록 바꾸어 구현했습니다. 이렇듯 구체적이고 자세한 레퍼런스를 넣는 것이 중요합니다.

UI디자인 중 색상을 변경하고 싶다면 반드시 색상코드를 사용하는 것이 좋습니다. 자칫하면 원하는 색이 아니라 애매한 색이 될 수 있어 디자인 수정 프롬프트를 계속 작성해야한다는 단점이 있습니다. 저는 성균관대학교의 상징색 4가지인 #003E74 #8DC73F #FF6C0F #2E4E3F 를 배치하여 만들었습니다.



---



5. 다른 사람도 따라 할 수 있나요?

📌 활용 방법

1. 만들고자 하는 웹사이트를 분명히 정하고 기획을 마친다. 이때 실현 가능한 사이트인지 검토하고 큰 구조가 어떻게 될지 파악한다.

2. 내가 이용할 요소들과 레퍼런스를 찾고 리스트화한다.

3. 보조 AI를 이용해 가장 적절한 프롬프트를 생성해 입력한다

4. UI 디자인을 충분히 수정한다.

5. 필요시 Supabase에서 작업 공간인 organization을 생성하고 실시간 연동을 지시한다.

6. pc와 모바일 모두에서 UI가 깨지지 않는지, 작동이 원활한지 확인 후 완료한다.


📌 기대 효과

* 누구나 쉽게 따라 할 수 있는 이유
비전공자인 제가 하루만에 웹사이트를 만들 수 있었습니다. 기본적으로 Readdy라는 ai가 매우 똑똑하고 UI 디자인을 제공하는 ai라 그런지 처음 접하는 사람도 이용하기 쉽게 직관적인 디자인을 가지고 있습니다. 초보자도 누구나 쉽게 이용할 수 있다는 큰 장점이 있습니다.

* 다른 프로젝트에도 적용 가능한 부분
해당 AI를 통해서 웹사이트까지 연결할 필요 없이 UI 디자인만 마무리하고 추후 코드를 입력해도 되고, 유료 서비스지만 코드도 확인 가능해서 자바를 공부한 사람이면 이를 직접 확인할 수도 있어 유용해 보입니다.