최종 팀플 (4) 웹사이트 기획 및 디자인

3주차 말
2024-02-29 ~ 03-02 (휴일 제외 대략 8일)

 
 

웹사이트 기획 및 디자인

 
 

---

 
 

✏️ 학습 내용

Vue.js를 학습 중에, 새로 배우는 언어로 멘땅에 헤딩하는 것보다 디자인을 잡아놓고 그대로 구현하는 것이 더 빠르다고 판단하여 중간에 웹사이트 기획과 디자인을 진행했다. 팀원과의 서비스 이해도를 맞추기 위해 먼저 이 작업을 했어도 좋았을 것 같은데, 당장의 데이터 수집과 전처리 등의 작업이 바빠서 미뤄왔다. (팀원과의 소통의 오류가 없던 것이 기적이다. 이 내용은 소감에서 계속..)
 
 
설계를 해두고 진행을 하면 속도가 더 빠르다. 설계는 방향성을 제시해준다. 얼마든지 중간에 바꿔도 된다. 어떻게 할 것인지 계획해두는 것은 중요한 일이다.
 
 

 
 
우선 디자인 퀄리티를 높이는 작업이 주 목적이 아니기 때문에, 디자인 시간을 단축하기 위해 AI 툴을 이용해서 랜딩페이지를 자동으로 디자인하도록 했다. 아직까진 영어는 쓸만한데 한글은 참.. 애매하다. 
 
이럴 때에는 우선 영어로 생성하고, 한글로 바꾸면 된다. 알아두어야 할 점은 폰트나 내용의 길이감 등에 따라서 느낌이 많이 달라지기 때문에 처음부터 100% 완성은 될 수 없다는 것이다. 프롬프트를 기깔나게 작성할 수 있는 것이 아니라면.
 
프롬프트의 구성이나 내용, 단어들을 소소하게 바꿔보면서 적절한 디자인 몇 개를 뽑았다. 예시를 하나 가져왔다.
 

AI가 그려준 웹사이트

 
 
그리고 이 툴을 이용했던 이유가 하나 더 있다. 반응형으로 자동 제작되고, 웹사이트 코드도 볼 수 있어서 응용할 수 있을 거라는 생각에 사용해보기로 한 것이다. 결론부터 말하자면 그다지 큰 도움은 되지 않았지만, 서포트 정도는 받았다.
 
 
다시 원래의 이야기로 돌아가서, 디자인 예시는 몇 가지 가져왔지만 사용하진 않았다. 우리의 웹사이트는 크게 보면 하나의 메인 기능을 가진 웹사이트인데 이를 프롬프트로 표현하기가 애매했다. 그래서 몇 개의 디자인들을 레퍼런스로 참고하였고, 다른 디자인 요소들 벤치마킹을 통해 화면을 쓱쓱 스케치하여 새롭게 그려나갔다.
 
익숙한 Figma 툴을 이용해서.
 
여기서 팁을 하나 주자면..
피그마와 같은 디자인툴에 익숙하지 않다면, 미리캔버스나 캔바, 망고보드와 같은 디자인 플랫폼 사이트를 이용해서 디자인해봐도 좋다. 이미지는 저작권 문제가 없는 것으로 잘 골라야 하겠지만 기본 틀이나 템플릿도 제공해주고, 쉽게 디자인을 할 수 있으니까 편리할 것이다.
 
 
 

웹사이트 디자인 시안

 
 
첫 날에는 AI를 활용해서 해보겠다, 디자인을 html로 바꿔주는 플러그인을 사용해보겠다, 다양한 시도들을 하느라 시간이 오래 걸렸지만 이 시도는 나중에 여유로울 때 해보기로 했다. 다음 날에 결과 화면을 디자인하고, 그 다음 날에는 파비콘이나 간단한 수정들을 하며 완성했다.
 
실제 소요된 시간은 그렇게 길지 않았는데, 맥북 에어 과부화로 한 번 꺼져서 식겁했다.
 
 
(+)
파비콘이랑 우리팀 심볼을 뚝딱뚝딱 만드는 과정은 잠깐 환기되고 좋았다 :D
 
 
디자인은 1차적으로 이렇게 작업했다. 진행해나가면서 바뀐 부분들도 있지만 크게 바꾸진 않았다.

📌 작업 결과

https://lovely-job-789351.framer.app/main

https://lovely-job-789351.framer.app/result

https://lovely-job-789351.framer.app/about

https://lovely-job-789351.framer.app/error

 

 

📌 작업 링크

https://framer.com/projects/youtube-recipe--u1FyFYQIOkwSxJu4jEKk-3xE7X?node=KPKmQWTG5

Framer Login

 

 

피그마는 공개된 공간이라 링크를 별도로 올리지 않을 예정이다.

 
 
 

 
 
 

💡 배운 점

• 플러그인이나 새로운 AI 툴을 도입하기 전에 설명, 사용 사례 들은 한 번 살펴보면 실수를 줄일 수 있다. (먼저 해보고 겪어봐도 좋지만, 이럴 경우 스프린트를 짧게 잡아야 후회하지 않는다.)

 

1. 2024-02-29 (목)
   • main 페이지를 위주로 작업했다.
   • Framer AI 활용 디자인 초안 생성
     • 한글로 작성하면 디자인 퀄리티가 안 좋다.
     • 스크롤 없이 생성되지 않고 무조건 스크롤 되도록 설정되어 있다.
     • html 변환이 어렵고, 웹페이지 게시는 편리하다. 대신 레이아웃 설정을 잘 해야 한다.
   •  Figma 활용 디자인 수정
     • Framer to Figma 가능하지만 배경으로 만든 도형의 틀어짐이 발생한다.
     • html 변환 플러그인을 활용하려는데 유료고, 렉걸리고 등등.. 시도하다가 포기했다.
2. 2024-03-01 (금)  
   • result 페이지를 위주로 작업했다.
   • Framer AI 활용 디자인 초안 생성 : 원하는 결과 화면이 명확하여 사용성이 떨어진다.
   • Framer에서 직접 만들기 시작했지만, 결과물이 마음에 들지 않아 다시 작업 예정이다.
3. 2024-03-02 (토) 
   • Figma로 파비콘 생성 (Framer 자체는 펜툴 활용이 힘든 구조이다.)
4. 2024-03-03 (일)
   • result 페이지 수정
   • main 페이지 추가 수정
   • error, about 페이지 생성

 
 

 
 

---

 

🔖 잘한 것과 잘못한 것

• 공동의 목표, 결과물에 대한 명확한 기획과 디자인 작업이 늦어졌다는 점을 반성한다.
  • 이는 팀원과의 싱크를 맞추기 위해 중요한 부분이며, 본 프로젝트의 목표를 설정하고 방향성을 제시하는 것과 같다.
  • 하지만 뒤늦게 작업되었기 때문에 자칫 잘못하면 서로 생각하는 기능에 대한 이해가 상이한 경우처럼 위험이 발생할 수도 있었다.
  • 다행인 점은 기능명세를 로직 위주로 작성해두었기에 이 디자인 작업물 없이도 팀원과의 이해도 차이가 발생하지 않게 되었던 것 같다.

 
 
 

📝 남아있는 의문과 개선점

• 프롬프트를 잘 쓰는 방법?
• 디자인 to HTML (리액트도 있던데 그것 또한) 기능을 사용해보고싶다.

반응형

 
 

 

---

 

☁️ 소감

기획의 중요성. 물론 뭔들 안 중요하겠냐마는, 방향을 잃지 않고 빠르게 나아가고 싶을 때에는 어느 정도의 기획이 필요한 것 같다. 정답인지는 모르겠고 이게 내가 일을 잘 할 수 있는 노하우 중 하나인 것 같다. 너무 두루뭉술하면 오히려 이해하기 힘들고 계속 제자리에 머물게 된다. 

제때에 소감을 작성했으면 좀 더 길었을 것 같은데, 한 번 감정이 정리된 상태여서 그런지 좀 더 담백해진 것 같다. 그래도 작업 중에 종종 기록을 남겼던 나를 칭찬한다.