본문 바로가기

분류 전체보기50

최종 프로젝트 중간발표 + 그동안의 일 최종 프로젝트를 한참하던 중,,,7월 31일에 친척분이 돌아가셔서8월 1일 오후부터 8월 2일까지 자리를 비우게 되었다. 최종 프로젝트지만 나에게 있어서 차마 안갈 수 없는...그런 분이셔서 팀원들께 양해를 구하고 출발하게 되었다. 그래도 내 분량인 공통 컴포넌트는 다 만들고8월 1일 오전까지 열심히 문제 해결도하고,, 출발하여서마음의 짐이 조금은 덜했다. 폭염이었는데 햇볓 쨍쨍 내리쬐는 산소에 있었던터라,, 두피랑 피부가 빨갛게 부어올랐다.아직도 너무너무 아프고 약바르고 있는데 그래도 프로젝트는 해야지! 다녀와서 바로 중간발표 PPT를 도맡아 만들었다.우리의 프로젝트랑 같은 느낌의 아주 심플한 PPT를 만들었다.   그리고 8월 5일 오늘 중간발표가 있었다.개인적인 생각으로 우리팀 PPT가 제일 보기 .. 2024. 8. 5.
Modal과 Dialog의 차이 요즘 디자이너와의 최종 팀프로젝트를 진행 중이다. 나는 MVP 구현 단계에서 시스템 컴포넌트 제작을 맡았다.그동안 팀프로젝트에서 각자 맡은 페이지의 컴포넌트는알아서 만드는 식으로 진행했었다. 이번 기회에 공용 컴포넌트를 만들어보는 좋은 경험을 할 것 같다.겸사겸사 storybook도 배워두면 좋을 것 같다. 공용 컴포넌트를 어떻게 만들어야다른 팀원이 편하게 쓸지... 고민을 많이 해보는 중이다.    오늘 시스템 디자인 도안이 나와서 둘러보던 중,다이얼로그를 보게 되었는데개발자들은 이걸 모달이라고 부르는 것 같은데무슨차이가 있는지 궁금해졌다.  Modal과 Dialog는 비슷한 개념이지만 약간의 차이가 있다.둘 다 사용자와 상호작용할 수 있도록 도와주는 창이다. Modal (모달):모달은 사용자가 현재의.. 2024. 7. 25.
Next.js에서 @next/font 패키지를 사용하여 구글 폰트 적용하기 Next.js에서 구글 폰트를 간편하게 적용하려면 @next/font 패키지를 사용하는 방법이 있다.이 글에서는 @next/font 패키지를 설치하고, 구글 폰트를 프로젝트에 적용하는 방법을 단계별로 알아보자. 1. @next/font 패키지 설치하기먼저, 프로젝트에 @next/font 패키지를 설치해야 한다.npm install @next/font  2. 구글 폰트 가져오기구글 폰트를 가져오는 방법을 살펴보자. 예를 들어 Noto Sans 폰트를 사용해보겠다. 2.1. 폰트 설정하기Next.js에서는 @next/font 패키지를 사용해 구글 폰트를 쉽게 설정할 수 있다. pages/_app.tsx 또는 pages/_document.tsx 파일에서 다음과 같이 폰트를 가져오고 적용할 수 있다.pages/.. 2024. 7. 24.
Chromatic을 활용한 Visual 테스트 웹사이트나 앱을 만들 때, 디자인이 의도한 대로 잘 나오는지 확인하는 건 아주 중요하다.이를 확인하기 위해 Visual 테스트를 사용할 수 있는데, 여기서 Chromatic이라는 도구가 큰 도움이 된다.Chromatic을 활용한 Visual 테스트가 무엇인지, 어떻게 사용하는지 알아보자. Chromatic이란?Chromatic은 웹 애플리케이션의 UI를 시각적으로 테스트할 수 있는 도구이다. 주로 Storybook과 함께 사용되며, 컴포넌트의 시각적인 변화를 자동으로 감지해준다. 이 도구는 개발자가 디자인이 의도대로 작동하는지 쉽게 확인할 수 있게 도와준다. Visual 테스트란?Visual 테스트는 웹 페이지나 앱의 화면이 정확히 어떻게 보이는지 확인하는 과정이다. 사용자는 UI의 디자인이 변경되었는지.. 2024. 7. 23.

티스토리툴바