LIFE POST 라는 미래 신문 작성 홈페이지를 만들었다.
LIFE POST
LIFE POST NEWS
wonowonow.github.io
스파르타 코딩 클럽에서 '코딩으로 나만의 특종 신문 만들기' 강의를 들었는데
주어진 HTML, CSS, Js 를 이용해서 GPT로 기사를 작성하게 하는 거였다.
기사 내용에 들어가는 사진과 동영상은 AI 사진 생성 및 동영상 생성 홈페이지를 이용하는데
1. 이미지 생성 AI
Dream by WOMBO
dream.ai
Remove Background and Create Product Pictures | PhotoRoom
Create product and portrait pictures using only your phone and our AI photo editing tools. Remove background, change background and showcase products.
www.photoroom.com
디자인 플랫폼 미리캔버스
디자인 작업이 필요한가요? 5만개 이상의 무료 템플릿으로 간편하고 편하게 원하는 디자인을 만들 수 있어요.
www.miricanvas.com
위의 사이트들을 이용했다.
PhotoRoom, 미리캔버스는 먼저 구독을 하고 있었고 자주 이용했기에 사용했다
PhotoRoom 에서는 배경에 삽입될 이미지를 만들었다.
구겨진 신문지를 원했기에 crumpled paper background, white paper 등의 프롬프트를 넣어줬다.
2. 이미지 영상 변환 AI
D-ID Creative Reality™️
D-ID, the leading AI Video Creation Platform, helps you make photorealistic videos using generative AI via D-ID’s API or Creative Reality™ studio.
www.d-id.com
LeiaPix Converter | Depth Animations
Bring your images to life. LeiaPix Converter lets you turn any of your favorite images into stunning Depth Animations.
convert.leiapix.com
이미지를 영상으로 변환해주는 AI 서비스도 이용했다.
D-ID는 이미지 속의 사람을 인식하고 제시된 문장을 입을 움직이고 표정도 변하면서 말하게 하는 것처럼 바꿔주었다.
LeiaPix는 사물과 배경의 원근감을 계산해서 움직여도 배경이랑 따로 움직이는 영상을 만들어주었다.
3. 파비콘 생성 서비스
Favicon & App Icon Generator
Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.
www.favicon-generator.org
이 서비스는 192x192px 사진을 넣어주면 각종 사이즈의 파비콘을 만들어주는 서비스를 한다.
이번 홈페이지를 만들면서 파비콘이라는 것을 처음 알았는데 이런 서비스가 있어서 정말 편했다.
192x192px 사진을 미리캔버스로 만들어주고 <head></head> 코드 안에 넣어주고 따로 폴더를 만들어서 생성된 이미지들 넣어주고 코드내에서는 위치 지정만 해주면 된다.
사실 처음 받았을 때 해리포터에 나오는 뉴스 느낌으로 만들려고 했다.
웹페이지 들어가면 해리포터 음악이 자동재생되게 하려했는데, 크롬에서 사용자 경험을 위해 정책상 막아뒀다고 한다.
아 그러면 좀 현대식으로 만들어보자 해서
배경 이미지 바꾸고
헤드라인 글씨 폰트, 폰트 사이즈 등등 통일화가 안된 디자인들을 조금 보기 좋게 통일화 시켰다.
스파르타 코딩에서 배운 구글 폰트 불러오기를 사용했다
전체적으로 노랗게 되어 있어서 자세히 보니 filter가 있었다
filter: grayscale (1) 을 넣어줘서 다 회색으로 바꿔줬다
그리고 스파르타 코딩 클럽에서 제공해준 Js를 넣으면 끝!
Js 뜯어보고 싶었는데 열어보니 뭔가 유니코드 쪽에서 문제가 난 건지 이상한 궳뜔쎍렉 이런 게 적혀 있어서
뜯어보는 건 실패했다..
알아보려면 알아볼 수 있는데 지금은 Js 배우는 건 우선 순위에서 밀린다. (자바 스프링 부캠 들어옴)
나중에 서버도 넣고 회원가입 및 로그인 시스템 등등 구현해보면 재밌을 거 같다.
'TIL' 카테고리의 다른 글
| TIL 2023 - 10 - 04 깃, 깃허브 사용법 (0) | 2023.10.04 |
|---|---|
| TIL 2023-09-28 meta 태그 미리보기 이미지가 안 뜰 때 해결 법 (0) | 2023.09.28 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 5주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 4주차 (0) | 2023.09.25 |
| 내일배움캠프 9기 자바스프링 사전캠프 웹 개발 AtoZ 3주차 (0) | 2023.09.25 |
