미뤘던 웹사이트 디자인 개선
계속 미뤄뒀던 제 소개페이지 디자인을 손보고 싶었어요.
이미 이것저것 많이 올려두기는 했지만, 디자인적으로는 매우매우매우 아쉬웠는데요.
한번 시작하면 다른일을 못할까바 미루다가 이번에 소개 페이지만 수정을 해봤어요!
텍스트와 정보만 나열되어 있어서 밋밋했는데, 디자인 작업을 새로 앉아서 하려니 엄두가 안 나서 계속 뒤로 미루 고 있었거든요. 그러다 코덱스로 인터렉션과 애니메이션을 빠르게 붙여볼 수 있다는 얘기를 듣고 바로 시도해봤어요.
[이전 웹페이지]
진행 방법
먼저 코덱스가 없다면!!
https://openai.com/ko-KR/codex/
위에 링크에서 설치 가능해요!
코덱스라는 단어가 강조 표시된 컴퓨터 화면
아쉽게도 코덱스는 돈을 내야만 사용가능하답니다!
1주차모임때 해당 명령어도 진행했어요!
approval_policy = “on request”
approvals_reviewr = “auto-review”
sandbox_mode = “danger-full-access”
이렇게 config.toml 세팅해줘
한국어 문자 메시지 스크린샷
코덱스로 어떻게 하지 했는데 스터디장님께서 만들어주신 챌린지 링크가 너무 도움이 많이 되는것 같아요!! ㅋㅋ
승부욕도 엄청 자극됩니당!
검은색 화면에 표시된 제품 디자인 앱의 스크린샷
먼저 다같이 플러그인을 설치했어요!
Produxt Design 는 웹사이트 링크를 주면 그대로 따라 만들어주는 플러그인에요!
채팅창에서 사용시에는 앞에 @가 필수입니다!
기존에 있던 소개페이지 링크를 코덱스에 그대로 넣고, 인터렉션과 애니메이션을 추가해달라고 요청했어요. 별도의 디자인 작업 없이 프롬프트 한 줄로 페이지에 움직임을 입혔습니다.
전에 커서와 클로드에서 작업을 했어서, 해당 내용들을 자동으로 불러와주니까 너무 편했어요!
작업했던거에서 새롭게 하기보다는 바로 붙어서 작업할 수 있어서 좋았어요!
사용한 프롬프트 전문
이번에 내 소개 페이지를 하나 업데이트 하려고 하는데 우선 새페이지에 내 소개를 하는 부분을 https://www.vstory.co.kr/main/index.php 해당 웹사이트를 참고해서 만들어줘
[@product-design](plugin://product-design@openai-curated-remote)
기존에 내 웹사이트를 분석해서 만들어줘
처음에는 해당 이미지가 나왔는데요.
처는 한장의 페이지가 아닌, 전체적인 인터렉션이 들어간 걸 원해서 다시 시켰습니다.
https://www.vstory.co.kr/main/index.php 해당 웹사이트 인터렉션이 다 들어간걸로 만들어줘 80% 동일하게 만들어줘 [@product-design](plugin://product-design@openai-curated-remote)결과가 100% 만족스럽다고 할 수는 없지만!
시각적인 효과가 전보다 있어서 좋았어요.
'아이디어를 경험으로'라는 문구가 적힌 웹사이트
구글 플레이 스토어 한국어 버전 스크린샷
다른 사용자들이 쓸 수 있게 하는 방법은 해당 플러그인을 먼저 설치해야해요!
동일하게 사용할때는 @를 붙여서 사용해야 합니다.
[@sites](plugin://sites@openai-bundled) 배포해줘저는 정말 대충 명령하다보니 ㅎㅎ 잘 한건지는 모르겠지만
링크는 잘 생성되더라구요!
검은 화면에 표시된 한국어 문자 메시지 앱의 스크린샷
배포된 사이트는 코덱스 내에서 수정이 가능해요!
구글 플레이 스토어 한국어 버전 스크린샷
공유대상만 수정하면 모두 볼 수 있어요!
저는 웹사이트가 따로 있어서, 거기에 붙여서 배포까지 진행했습니다!
[미리보기 gif]
거리 디자인이라는 단어가 포함된 검정 및 빨강 웹사이트
결과와 배운 점
프로덕트 디자인 플러그인에 대해서 알게 된 건 site 라는 점을 알게 되서,
급하게 개발할 때는 코덱스를 쓰는 것도 좋을 것 같아요.
웹사이트를 더 개선해볼 예정이에요! 추가로 게임도 만들어봤는데 재밌었어요! 코덱스만의 장점을 살려서 할 수 있는 일을 고민 중이에요.
짧게 만들어본 게임
작전 그린샷 - 스크린샷 썸네일
https://operation-greenshot.bigkey.chatgpt.site
한국어 텍스트가 포함된 웹사이트 스크린샷
