Front-end) 쇼핑몰 프로젝트 홈 화면 설계

이전 포스터

Front-end) 프로젝트 GraphQL 연동과 커스텀 Hook

---

✅Intro

• 홈 화면 설계
• 홈 화면에 들어갈 기술들
• 쇼핑몰 프로젝트 홈 화면을 제작하면서 생겼던 문제점
• 최적화와 암호화 생각하기

 

홈 화면 디자인과 설계 과정

쇼핑몰 프로젝트에서는 앞서 설명했듯이 아토믹 디자인 구조 설계하기로 하였다.
간단하게 아토믹 디자인을 상기 시키자면 atoms, molecules, organisms, templates, pages로 원자적 구조로 나누어 재활용성을 높여서 프로젝트의 효율성과 진행속도 측면에서 빠른 시간내에 프로젝트를 진행할 수 있게 끔하기 위해 아토믹 디자인을 채택했다.
그러기 위해서는 디자인이 우선 완성이 된 후에 atom과 molecule, organism을 구분을 지어야 한다는 점에서 디자이너의 역활이 큰 비중을 차지한다.
 

※ Figma 디자인을 통해서 아토믹 디자인 구조와 설계 하도록 나누어 보자

 
우리는 처음에 웹과 앱 동시에 되는 피규어 쇼핑몰을 만들기 위해서 반응형 css를 채택하여 설계하도록 진행하였다.
 

1. 반응형 디자인 규격 정하기

• 화면 크기 규격

브레이크 포인트	콘텐츠 최소 크기	콘텐츠 최대 크기	스크린
320px ~ 480px	Fill container 좌우 패딩 16px	Fill container 좌우 패딩 16px	모바일[최소]
480px ~ 768px	Fill container 좌우 패딩 16px	Fill container 좌우 패딩 16px	모바일
768px ~ 1024px	Fill container 좌우 패딩 24px	Fill container 좌우 패딩 24px	태블릿
1024px ~ 1280px	980px	1080px	렙탑
1280px~	1080px	1080px	데스크탑

 

• 폰트 규격

폰트 사이즈	Pixel	Rem		variable 변수명
html(기본)	16px	1 rem		undefined
font-xs	12px	0.75 rem
font-sm	14px	0.875 Rem
font-base	16px	1 rem
font-lg	18px	1.125 Rem
font-xl	20px	1.25 Rem

 

2. Figma 화면 디자인

• 데스크탑 화면

 

• 모바일 화면

 
 

※기초적인 디자인이 완성 되었으면 이제부터 아토믹 디자인을 적용시켜서 최대한 재활용 컴포넌트를 만들어 보자.

 

1. Atoms로 기준 잡을 컴포넌트들

• Button 컴포넌트
• Icon 컴포넌트
• Text 컴포넌트
• Image 컴포넌트
• Chip 컴포넌트

2. molecule로 기준 잡을 컴포넌트들

• button
  • ButtonGroups 컴포넌트
  • IconButton 컴포넌트
  • ImageButton 컴포넌트
  • ImageTextButton 컴포넌트
  • TextButton 컴포넌트
• card
  • CardAction 컴포넌트
  • CardContent 컴포넌트
  • CardHeader 컴포넌트
  • CardMedia 컴포넌트
• icon
  • IconGroups 컴포넌트
• Masonry 컴포넌트
• Swiper 컴포넌트
• text
  • TextGroups 컴포넌트

 

3. organism으로 기준잡은 컴포넌트들

• home
  • HomeSwiper 컴포넌트
    => 홈 화면에 메인 스와이퍼를 보여주기 위한 컴포넌트로써 나중에 재활용 용도가 있을지는 미지수 이다.
  • product
    • EventList 컴포넌트
      => 이벤트 화면을 Swiper로 나타내주는 컴포넌트 각 적용하는 방식이 메인 스와이퍼와 다르고 연결되는 데이터가 다르기 때문에 HomeSwiper 컴포넌트로 묶어 작성하지 않았다.
    • PickList 컴포넌트
      => Masonry 컴포넌트를 사용하여 랭킹 리스트를 보여주는 컴포넌트이다.
    • PopularList 컴포넌트 
      => 물품 목록 컴포넌트 리스트로 추후에 카테고리에 물품목록에서 나타내는 컴포넌트에서도 재활용 되기 때문에 많은 곳에서 사용될 것을 고려하고 className을 다양하게 받아 template에서 처리를 해주었다. 그리고 유지보수를 위해서 물품 목록 디자인 규격은 쇼핑몰 내에서 다 동일해야 하기 때문에 이 부분에서 프로젝트를 하면서 가장 재활용성이 뛰어난 Organism이라고 생각한다.
    • RecommendList 컴포넌트
      => 나중에 Recommend와 Event는 규격과 방식이 비슷하여 Swiper를 합치므로써 유지보수나 나중에 재활용성을 더욱 높일 수 있을거 같아 변경 예정이다.
  • ReviewList 컴포넌트
    => 리뷰 화면 카드를 보여주는 List로 물품 목록과 다르게 나타내는 content가 다르기 때문에 묶어 사용할 수 없었다.

 

디자인 화면을 통해서 아토믹 디자인을 맞춰서 설계를 해보고 컴포넌트를 작성해 보았다.
그것을 통해서 재활용 할 컴포넌트와 개별적을 쓰일 컴포넌트를 정해서 설계해보았다. 그렇게 해본 결과로 각 컴포넌트들을 다른 페이지에서도 활용도를 늘리기 위해서 많은 것을 고려해야되는 atom과 molcule은 최대한 변경 없이 설정을 하고 변경을 하게 되면 다른 팀원과 협의 후 변경을 해야 된다고 생각하게 되었다.

 

쇼핑몰 프로젝트 홈 화면을 제작하면서 생겼던 문제점

문제점

위에서 말했듯이 디자이너의 역활이 큰 비중을 차지한다. 우리 프로젝트에서의 디자이너도 아토믹 디자인을 처음 접해서 구조를 어떻게 나눠야 할지 그리고 그것을 어떻게 협의하여 진행 해야 할지 잘 모르는 단계이기 때문에 많은 문제점이 발생하면서 아토믹 디자인의 장점이 조금은 퇴색되면서 단점을 볼 수 있었던거 같다.

 

결론

다음 프로젝트에서는 아토믹 디자인을 더욱 보안하고 디자인적으로도 잘 협의 하여 모든 부분에서 보안하여 프로젝트를 더욱 효율적이게 진행해야 된 거 같다고 생각할 수 있었다.

 

홈 화면을 제작하면서 생각해야 할 최적화와 페이지 이동시 주소 암호화

1. 최적화

어느정도의 프로젝트가 구성이 끝나가는 단계에서 페이지를 렌더링 할 때 서버에 gql 쿼리를 호출 할 때마다 리렌더링이 진행될건데 그것을 데이터가 변경이되면 계속해서 리렌더링이 진행될 것이다. 그렇게되면 필요없이 리렌더링이 발생하고 서버에 필요없는 데이터를 두번 요청하는 일도 발생하고 데이터를 재 갱신하는 일도 발생한다.
우리 프로젝트에서도 이것을 방지하기 위해 최적화를 염두해 두면서 useCallback과 useMemo, useEffect에 있는 의존성 배열에 데이터를 입력받아 최대한으로 최적화를 진행하고 코드를 정리 할 때 불필요하게 호출 될 일이 없게 비슷한 코드는 한개의 함수로 합치는 방식으로 코드를 리펙토링을 진행하였다.

 

2. 암호화

서버와 합의 된 점이 없어서 서버 암호화를 같이 진행해야 하기 때문에 주소 암호화/복호화 하는 방식은 추후 리펙토링 하기로 하였고 지금은 지금은 암호화 대신해서 주소를 인코딩화 시켜서 굳이 불필요하게 물품id를 주소에 노출 시켜주는 방식을 막아주도록 해주었다. 암호화/복호화를 위해서 공부해야 될 자료와 블로그를 밑에 출처와 함께 남겨 놓았다.

 

 

참고 
출처 : 아토믹 디자인 예제

Atomic Design Check List

출처 : 암호화/복호화 블로그

[React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기