diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 872c03b0..1c484b95 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { InferGetServerSidePropsType } from 'next';
-import { lazy } from 'react';
+import dynamic from 'next/dynamic';
 import PageLayout from '@src/components/common/PageLayout';
 import { api } from '@src/lib/api';
 import {
@@ -10,9 +10,12 @@ import {
   RecordSection,
 } from '@src/views/AboutPage/components';
 
-const MemberSection = lazy(() => import('@src/views/AboutPage/components/Member/Section'));
+const MemberSection = dynamic(() => import('@src/views/AboutPage/components/Member/Section'));
 
-const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticProps>) => {
+const AboutPage = ({
+  aboutInfo,
+  memberInfo,
+}: InferGetServerSidePropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Root>
@@ -22,7 +25,7 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
           coreValues={aboutInfo.aboutInfo.coreValue.eachValues}
         />
         <CurriculumSection curriculums={aboutInfo.aboutInfo.curriculums} />
-        <MemberSection generation={aboutInfo.aboutInfo.generation} />
+        <MemberSection members={memberInfo.members} generation={aboutInfo.aboutInfo.generation} />
         <RecordSection
           generation={aboutInfo.aboutInfo.generation}
           records={aboutInfo.aboutInfo.records}
@@ -34,10 +37,12 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
 
 export const getStaticProps = async () => {
   const aboutInfo = await api.aboutAPI.getAboutInfo();
+  const memberInfo = await api.aboutAPI.getMemberInfo();
 
   return {
     props: {
       aboutInfo,
+      memberInfo,
     },
   };
 };
diff --git a/src/views/AboutPage/components/Member/Card/index.tsx b/src/views/AboutPage/components/Member/Card/index.tsx
index 16a5f2bc..64f6ae36 100644
--- a/src/views/AboutPage/components/Member/Card/index.tsx
+++ b/src/views/AboutPage/components/Member/Card/index.tsx
@@ -29,7 +29,12 @@ const MemberCard = ({
   return (
     <St.Card>
       <St.ImageWrapper>
-        <St.ProfileImage src={imageSrc || NullImage.src} alt={`${name}의 프로필`} fill />
+        <St.ProfileImage
+          src={imageSrc || NullImage.src}
+          alt={`${name}의 프로필`}
+          fill
+          sizes="100%"
+        />
       </St.ImageWrapper>
       <St.NameWrapper>
         <St.Position>{position}</St.Position>
diff --git a/src/views/AboutPage/components/Member/Content/index.tsx b/src/views/AboutPage/components/Member/Content/index.tsx
deleted file mode 100644
index f7c3494c..00000000
--- a/src/views/AboutPage/components/Member/Content/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useMemo } from 'react';
-import Flex from '@src/components/common/Flex';
-import OvalSpinner from '@src/components/common/OvalSpinner';
-import { emptyMembers } from '@src/views/AboutPage/constant/emptyMembers';
-import useGetMember from '@src/views/AboutPage/hooks/queries/useGetMemeber';
-import MemberCard from '../Card';
-import * as St from './style';
-
-const MemberContent = () => {
-  const { data, isLoading } = useGetMember();
-
-  //불필요해진 DataErrorBanner 컴포넌트 삭제
-  //useQuery로 마이그레이션 하면 state에 따른 조건부 렌더링 코드가 모두 바뀔 것으로 예상되어 관련 코드는 일단 주석처리했습니다
-  //const errorContent = state._TAG === 'ERROR' && <DataErrorBanner />;
-
-  const cardContent = useMemo(() => {
-    if (!isLoading)
-      return (data ? data.members : emptyMembers(6)).map(
-        ({
-          id,
-          name,
-          position,
-          description,
-          currentProject,
-          imageSrc,
-          gmail,
-          linkedin,
-          github,
-        }) => (
-          <MemberCard
-            key={id}
-            name={name}
-            position={position}
-            description={description}
-            currentProject={currentProject}
-            imageSrc={imageSrc}
-            gmail={gmail}
-            linkedin={linkedin}
-            github={github}
-          />
-        ),
-      );
-
-    return (
-      <St.OvalSpinnerWrapper>
-        <OvalSpinner />
-      </St.OvalSpinnerWrapper>
-    );
-  }, [data, isLoading]);
-
-  return (
-    <Flex
-      dir="column"
-      gap={{ mobile: 18, tablet: 24, desktop: 48 }}
-      style={{ alignItems: 'center' }}
-    >
-      {/* {errorContent} */}
-      <St.CardContainer>{cardContent}</St.CardContainer>
-    </Flex>
-  );
-};
-
-export default MemberContent;
diff --git a/src/views/AboutPage/components/Member/Content/style.ts b/src/views/AboutPage/components/Member/Content/style.ts
deleted file mode 100644
index acfe58aa..00000000
--- a/src/views/AboutPage/components/Member/Content/style.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import styled from '@emotion/styled';
-
-export const CardContainer = styled.div`
-  display: grid;
-
-  grid-template-columns: repeat(3, 1fr);
-  gap: 34px;
-  width: 1200px;
-
-  @media (max-width: 80rem) and (min-width: 73.125rem) {
-    width: calc(100% - 40px);
-  }
-
-  @media (max-width: 73.125rem) and (min-width: 48rem) {
-    grid-template-columns: repeat(2, 1fr);
-    width: 752px;
-  }
-
-  @media (max-width: 48rem) and (min-width: 36.5rem) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 24px;
-    width: 576px;
-  }
-  /* 모바일 뷰 */
-  @media (max-width: 36.5rem) {
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px;
-    width: max(350px, 100% - 40px);
-  }
-`;
-
-export const OvalSpinnerWrapper = styled.div`
-  width: 100%;
-  height: 100vh;
-
-  padding-top: 200px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
diff --git a/src/views/AboutPage/components/Member/Section/index.tsx b/src/views/AboutPage/components/Member/Section/index.tsx
index 94e20694..41a9e625 100644
--- a/src/views/AboutPage/components/Member/Section/index.tsx
+++ b/src/views/AboutPage/components/Member/Section/index.tsx
@@ -1,13 +1,15 @@
 import Flex from '@src/components/common/Flex';
+import { MemberType } from '@src/lib/types/about';
+import MemberCard from '@src/views/AboutPage/components/Member/Card';
 import SectionTop from '../../@common/SectionTop';
-import MemberContent from '../Content';
 import * as St from './style';
 
 type MemberSectionProps = {
   generation: number;
+  members: MemberType[];
 };
 
-const MemberSection = ({ generation }: MemberSectionProps) => {
+const MemberSection = ({ generation, members }: MemberSectionProps) => {
   return (
     <Flex
       dir="column"
@@ -21,7 +23,40 @@ const MemberSection = ({ generation }: MemberSectionProps) => {
         description="200명의 활동 회원들이 열정을 외칠 수 있도록, 35기 AND SOPT를 이끄는 임원진들이에요."
       />
       {/* TODO : 서버에서 description을 받아오도록 수정 */}
-      <MemberContent />
+      <Flex
+        dir="column"
+        gap={{ mobile: 18, tablet: 24, desktop: 48 }}
+        style={{ alignItems: 'center' }}
+      >
+        {/* {errorContent} */}
+        <St.CardContainer>
+          {members.map(
+            ({
+              id,
+              name,
+              position,
+              description,
+              currentProject,
+              imageSrc,
+              gmail,
+              linkedin,
+              github,
+            }) => (
+              <MemberCard
+                key={id}
+                name={name}
+                position={position}
+                description={description}
+                currentProject={currentProject}
+                imageSrc={imageSrc}
+                gmail={gmail}
+                linkedin={linkedin}
+                github={github}
+              />
+            ),
+          )}
+        </St.CardContainer>
+      </Flex>
     </Flex>
   );
 };
diff --git a/src/views/AboutPage/components/Member/Section/style.ts b/src/views/AboutPage/components/Member/Section/style.ts
index b6e697cb..a222c3e2 100644
--- a/src/views/AboutPage/components/Member/Section/style.ts
+++ b/src/views/AboutPage/components/Member/Section/style.ts
@@ -10,3 +10,43 @@ export const MarginTop = styled.div`
     height: 120px;
   }
 `;
+
+export const CardContainer = styled.div`
+  display: grid;
+
+  grid-template-columns: repeat(3, 1fr);
+  gap: 34px;
+  width: 1200px;
+
+  @media (max-width: 80rem) and (min-width: 73.125rem) {
+    width: calc(100% - 40px);
+  }
+
+  @media (max-width: 73.125rem) and (min-width: 48rem) {
+    grid-template-columns: repeat(2, 1fr);
+    width: 752px;
+  }
+
+  @media (max-width: 48rem) and (min-width: 36.5rem) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+    width: 576px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 36.5rem) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+    width: max(350px, 100% - 40px);
+  }
+`;
+
+export const OvalSpinnerWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+
+  padding-top: 200px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;