Responsive Admin Dashboard with Light & Dark Mode #2

WireFrame과 웹사이트의 유료, 무료 서비스

 

Aside/Main/right-section

3가지 큰 영역으로 나눠져 있다. Aside에는 여러가지 메뉴를 선택하여 서비스를 나눠서 탐색하고 Main에서는 주로 사용하는 기능들을 넣는다. right-section에서는 현재 자신 계정 표시와 함께 자신이 할일들을 넣었다. 탐색 바에서는 페이지를 이동하는 링크 역할을 하게 된다.

 

header 상단 검색바와 좌우 아이콘

container (main) - root - left_column, right_column으로 레이아웃을 나눠놓았다.

최하단에 footer (content info)가 있다.

- pc 버전의 웹사이트이며 컴퓨터를 사용하는 사람이 고객이 된다. 회원 시스템, 각종 커뮤니티, 날씨, 부동산 및 주식, 쇼핑까지 다양한 시스템으로 연결되는 메인 페이지라고 볼 수 있다. 네이버가 어떤 부분은 무료로 서비스하고 어떤 부분은 유료로 서비스 하는지 알아보자.

 

- 회원가입, 이메일, 뉴스 탐색, 주식 시세 확인, 부동산 시세 확인, 블로그 및 카페 커뮤니티 만들기, 쇼핑몰 만들기, 게임 스트리밍, 지도 이용, 웹툰, 영화, 브라우저 등은 일부 무료이지만 어떤 부분은 유료이다.

 

- 구글의 경우 블로그는 있지만 카페는 없다. 다른 것들은 모두 서비스가 있긴 하지만 다른 웹 사이트에 연결되기 때문에 구글 자체적으로 주식 서비스를 제공한다고 보긴 어렵다. 구글이나 네이버 모두 사용자가 검색하고 다른 인터넷 커뮤니티로 연결되어 가입하는 방식으로 인터넷에 연결되어 있다.

 

- 방대한 사이트을 탐색하여 연결 시키고 이를 통해 유저가 어떤 정보를 소비하는 패턴을 보이는지 알 수 있게 된다. 일종의 커맨더 역할을 하는 회사라고 생각이든다. 말 그대로 검색 플렛폼이며 주 서비스는 검색을 통한 정보 제공이다. 인터넷에 뿌려져 있는 수많은 자료들의 가치는 얼마나 될까?

다크모드와 함께 다양한 기능을 사용할 수 있는데 mac 전용으로 제한되어 있다.

네이버 웍스 - 디스코드나 노션의 역할을 대체할 수 있는 서비스이다. 구글 또한 해당 서비스를 제공하고 있다.

 

- 메일, 캘린더, 드라이브와 같은 서비스를 하나로 통합하여 협업을 할 수 있게 해주는 서비스이다. 협업 도구는 생각보다 많지만 특정 산업에 집중하여 특화된 서비스를 개발하려는 움직임이 있다. 금융권 협업 서비스, 웹 개발 협업 서비스 등등 각 IT 사업에 맞는 협업 커뮤니티가 발전하고 있는 상황이다. (미래에는 회사를 사고 파는데 이러한 커뮤니티의 가치가 매우 높을 것으로 보인다.)

제품을 소개하고 홍보하는 사이트이다. 제품으로 무엇을 할 수 있는지를 시각적으로 표현하는 것이 목적이다.

 

wireframe으로 레이아웃을 미리 그려보고 목업(시안)을 만들어서 최종적인 결과물을 미리 볼 수 있게 고객에게 제안하는 것이다. 시각적으로 이렇게 만들어진다는 것을 미리 알 수 있으며 기획 및 영업 단계에서 중요한 자료가 된다.   

social-news-website-wireframe.pdf

0.02MB

 

figma와 chatGPT AI로 와이어프레임을 자동으로 그려서 웹 사이트를 찍어낼 수 있다.

웹 사이트를 만들기 위해서 어떤 순서로 만들어야 하는지 나온다.

발로란트 유저들을 위한 커뮤니티를 디자인 해줘라고 하면 이런식으로 뜬다.

https://www.youtube.com/watch?v=_DphpzGlxv8&t=257s

 

여러가지 AI 툴들을 이용하여 웹 디자인에 도움을 받는 영상이다. 또한 다양한 플러그인들이 상업 디자인에서 사용되고 있다. 피그마 뿐만 아니라 언리얼, 유니티, 블랜더와 같은 곳들 또한 마찬가지인데 깃허브 copilot는 유료로 서비스가 되고 있다.  

https://yozm.wishket.com/magazine/detail/2212/ 

알아두면 쓸모 있는 피그마 플러그인 추천 7가지 | 요즘IT

https://docs.github.com/ko/copilot/overview-of-github-copilot/about-github-copilot-individual

GitHub Copilot Individual 정보 - GitHub Docs

당연하게도 AI 툴을 이용하여 모든 것을 만들 수는 없다. 그러나 AI가 만드는 영역에 자신도 포함이된다면 시장에서 큰 의미가 없어진 것도 사실이다. AI 툴은 도구이며 툴 이상으로 무언가를 만들어야만 본인의 가치가 생기는 상황이다. 그래서 AI 툴을 어쩔 수 없이 어느 정도 사용해볼 수 밖에 없다.

---

https://www.globalreach.com/global-reach-media/blog/2017/09/27/8-key-features-your-homepage-should-include

8 Key Features Your Homepage Should Include

 

https://weblium.com/blog/website-homepage-design-examples-of-the-best-homepages/

Best Homepages: 24 Top Homepage Examples in 2024 - Weblium Blog

 

홈페이지에 들어가야 하는 필수 기능들은 뭐가 있을까?

 

1. 로고

2. 내비게이션

3. 헤드라인

4. CTA(Call to Action)

5. 사회적 증명

6. 사진

7. 텍스트 내용

8. 바닥글

9. 비디오

 

좋은 홈페이지는 어떤 홈페이지일까?

 

1. 명확성

2. 타겟이 명확해야 함

3. 타겟(사용자)에게 편리해야 함

4. 비즈니스 미학

5. 대화형

6. 로딩 속도

 

개발자 본인을 시장에서 표현할 수 있는 포트폴리오는 퍼스널 브랜딩과 큰 차이가 없지 않을까? 그런데 브랜딩에는 개인 능력에 한계가 있다. 그래서 유튜브에 혼자서 영상을 계속 올린다고 하더라도 사실 큰 의미가 없다고 생각한다. 개발자는 결국 어떤 문제를 해결하기 위해서 어떤 것들을 만들었고 그러한 것들을 사용자에게 제공할 수 있는가?가 더 중요하다.

 

그래서 문제 해결 능력이 중요한 건 누구나 아는 사실이고 이를 증명하기 위해서 어떤 준비를 해야 하는가?를 생각해보면 자신이 어떤 문제를 선정했고 어떻게 이것을 해결했는지, 그리고 어떤 가치를 창출했는지를 보여주면 될뿐이다. 왜 웹 사이트가 필요한지? 그래서 어떤 프로그램이 필요한지 명확히 해야 한다.

 

개인 프로젝트를 선정하고 어떻게 진행할 것인지 계획부터 세우는 것도 쉽지 않다. 어찌되었든 이 클론코딩을 다음 포스팅에서 마무리하고 몇가지 계획을 세워야 할 것 같다.